AngularJS入門講解2：過濾器和雙向綁定

時間 2019-11-15

標籤 angularjs 入門講解過濾器雙向綁定欄目 AngularJS 简体版

原文原文鏈接

咱們在上一課作了不少基礎性的訓練，接下來，咱們講一些難點的知識點，首先，講一下如何實現一個全文檢索功能：html

<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`）其過濾器的輸入。app

使用filter過濾器：filter函數使用query的值來建立一個只包含匹配query記錄的新數組。函數

ngRepeat會根據filter過濾器生成的手機記錄數據數組來自動更新視圖。整個過程對於開發者來講都是透明的。ui

接下來，咱們將在上面的例子中添加一個新的功能：增長一個讓用戶控制手機列表顯示順序的功能spa

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過濾器的輸入。code

不管何時數據模型發生了改變（好比用戶在下拉菜單中選了不一樣的選項），AngularJS的數據綁定會讓視圖自動更新。沒有任何笨拙的DOM操做！htm

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是如何分離的：