我們在上一課做了很多基礎性的訓練，接下來，我們講一些難點的知識點，首先，講一下如何實現一個全文檢索功能：
<html ng-app>
<head>
...
<script src="lib/angular/angular.js"></script>
<script>
function PhoneListCtrl($scope) {
$scope.phones = [
{"name": "Nexus S","snippet": "Fast just got faster with Nexus S."},
{"name": "Motorola XOOM™ with Wi-Fi","snippet": "The Next, Next Generation tablet."},
{"name": "MOTOROLA XOOM™", "snippet": "The Next, Next Generation tablet."}
];
}
</script>
</head>
<body ng-controller="PhoneListCtrl">
<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>
</body>
</html>
上面這個代碼的功能：允許用戶輸入一個搜索條件，立刻就能看到電話列表中的搜索結果。
當頁面加載後，AngularJS會根據輸入框中的值，將其與數據模型中相同名字的變量（$scope.query）綁定在一起，以確保兩者的同步性。
在這段代碼中，用戶在輸入框中輸入的值稱作query，會立刻作為列表迭代器（phone in phones | filter:query`）其過濾器的輸入。
使用filter過濾器：filter函數使用query的值來創建一個只包含匹配query記錄的新數組。
ngRepeat會根據filter過濾器生成的手機記錄數據數組來自動更新視圖。整個過程對於開發者來說都是透明的。
接下來，我們將在上面的例子中添加一個新的功能：增加一個讓用戶控制手機列表顯示順序的功能
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>
我們在html中做了如下更改：
•首先，我們增加了一個叫做orderProp的<select>標簽，這樣我們的用戶就可以選擇我們提供的兩種排序方法。
•然後，在filter過濾器後面添加一個orderBy過濾器用其來處理進入迭代器的數據。orderBy過濾器以一個數組作為輸入，復制一份副本，然後把副本重排序再輸出到迭代器。
AngularJS在select元素和orderProp模型之間創建了一個雙向綁定。而且orderProp會被用作orderBy過濾器的輸入。
無論什麼時候數據模型發生了改變（比如用戶在下拉菜單中選了不同的選項），AngularJS的數據綁定會讓視圖自動更新。沒有任何笨拙的DOM操作！
function PhoneListCtrl($scope) {
$scope.phones = [
{"name": "Nexus S",
"snippet": "Fast just got faster with Nexus S.",
"age": 0},
{"name": "Motorola XOOM™ with Wi-Fi",
"snippet": "The Next, Next Generation tablet.",
"age": 1},
{"name": "MOTOROLA XOOM™",
"snippet": "The Next, Next Generation tablet.",
"age": 2}
];
$scope.orderProp = 'age';
}
•我們修改了phones模型—— 手機列表的數組 ——為每一個手機記錄增加了一個age屬性。我們會根據age屬性來對手機列表進行排序。
•我們在控制器代碼裡加了一行orderProp的默認值為age。如果我們不設置默認值，這個模型會在我們的用戶在下拉菜單選擇一個順序之前一直處於未初始化狀態。
當應用在浏覽器中加載時，“Newest”在下拉菜單中被選中。這是因為我們在控制器中我們把orderProp設置成了‘age’。所以綁定，從模型到用戶界面的方向上起了作用——即數據從模型到視圖的綁定。現在當你在下拉菜單中選擇“Alphabetically”，數據模型會被同時更新，並且手機列表數組會被重新排序。這個時候數據綁定從另一個方向產生了作用——即數據從視圖到模型的綁定。
最後，通過一幅圖來看一下這個例子的M和V是如何分離的：
看了這個例子，大家是否覺得使用angular進行開發，是不是很方便啊。它封裝了事件綁定，DOM操作，模板解析等操作，大大的減少了開發任務。
AngularJS權威教程 清晰PDF版 http://www.linuxidc.com/Linux/2015-01/111429.htm
希望你喜歡，並分享我的工作~帶你走近AngularJS系列：
如何在 AngularJS 中對控制器進行單元測試 http://www.linuxidc.com/Linux/2013-12/94166.htm
在 AngularJS 應用中通過 JSON 文件來設置狀態 http://www.linuxidc.com/Linux/2014-07/104083.htm
AngularJS 之 Factory vs Service vs Provider http://www.linuxidc.com/Linux/2014-05/101475.htm
AngularJS —— 使用 ngResource、RESTful APIs 和 Spring MVC 框架提交數據 http://www.linuxidc.com/Linux/2014-07/104402.htm
AngularJS 的詳細介紹：請點這裡
AngularJS 的下載地址：請點這裡
