Angular.js回顧+學習筆記(1)【ng-app和ng-model】 · 前端開發常用技巧經驗記錄

Angular.js中index.html簡單結構： ~~~ <!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> Your name: <input type="text" ng-model="yourname" placeholder="World"> <hr> Hello {{yourname || 'World'}}! </body> </html> ~~~ ng-app屬性是angular.js的標志語句，它標記了angular.js的作用域。ng-app可以添加在很多地方，像上面那樣添加到html標簽上，說明angular腳本對整個頁面都起作用。也可以在局部添加ng-app屬性，比如在某一個div內添加ng-app，則表明接下來的整個div區域使用angular腳本解析，而其他位置則不適用angular腳本解析。 ng-model表示建立一個數據模型。這里在input輸入姓名的輸入框內，我們把該定義了一個yourname數據模型。定義了該模型后，我們可以在下面進行調用，方法是利用{{}}。這樣就完成了數據綁定，當我們在輸入框內輸入內容時，會同步到下面的Hello語句塊中。 ng-model定義的數據模型不僅可以用于上述場景，還能在許多情況下得到廣泛應用。 1、設置filter，實現搜索功能在下面的代碼中，我們利用一個簡單的數據模型定義+filter就可以完成一個列表搜索功能。（這是中文網上的實例代碼，先不需要管不清楚的部分） ~~~ <div class="container-fluid"> <div class="row-fluid"> <div class="span2"> Search: <input ng-model="query"> </div> <div class="span10"> <ul class="phones"> <li ng-repeat="phone in phones | filter:query"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul> </div> </div> </div> ~~~ 上述代碼中，為搜索框的input標簽綁定了數據模型query。這樣，用戶輸入的信息會被同步到query數據模型中。在下面的li中，使用filter:query就可以實現列表中的數據過濾功能，按照用戶的輸入信息進行filter過濾。 2、設置orderBy，實現列表排序功能在下面的代碼中，與filter同理，使用orderBy為列表添加一個排序功能： ~~~ Search: <input ng-model="query"> Sort by: <select ng-model="orderProp"> <option value="name">Alphabetical</option> <option value="age">Newest</option> </select> <ul class="phones"> <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul> ~~~