7. 雙向綁定

在這一步你會增加一個讓用戶控制手機(jī)列表顯示順序的特性。動態(tài)排序可以這樣實(shí)現(xiàn)，添加一個新的模型屬性，把它和迭代器集成起來，然后讓數(shù)據(jù)綁定完成剩下的事情。

請重置工作目錄：

git checkout -f step-4

你應(yīng)該發(fā)現(xiàn)除了搜索框之外，你的應(yīng)用多了一個下來菜單，它可以允許控制電話排列的順序。

步驟3和步驟4之間最重要的不同在下面列出。你可以在GitHub里看到完整的差別。

模板

app/index.html

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>

我們在index.html中做了如下更改：

• 首先，我們增加了一個叫做orderProp的``標(biāo)簽，這樣我們的用戶就可以選擇我們提供的兩種排序方法。

• 然后，在filter過濾器后面添加一個orderBy過濾器用其來處理進(jìn)入迭代器的數(shù)據(jù)。orderBy過濾器以一個數(shù)組作為輸入，復(fù)制一份副本，然后把副本重排序再輸出到迭代器。

AngularJS在select元素和orderProp模型之間創(chuàng)建了一個雙向綁定。而后，orderProp會被用作orderBy過濾器的輸入。

正如我們在步驟3中討論數(shù)據(jù)綁定和迭代器的時候所說的一樣，無論什么時候數(shù)據(jù)模型發(fā)生了改變（比如用戶在下拉菜單中選了不同的順序），AngularJS的數(shù)據(jù)綁定會讓視圖自動更新。沒有任何笨拙的DOM操作！

控制器

app/js/controllers.js：

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模型—— 手機(jī)的數(shù)組 ——為每一個手機(jī)記錄其增加了一個age屬性。我們會根據(jù)age屬性來對手機(jī)進(jìn)行排序。

• 我們在控制器代碼里加了一行讓orderProp的默認(rèn)值為age。如果我們不設(shè)置默認(rèn)值，這個模型會在我們的用戶在下拉菜單選擇一個順序之前一直處于未初始化狀態(tài)。

  現(xiàn)在我們該好好談?wù)勲p向數(shù)據(jù)綁定了。注意到當(dāng)應(yīng)用在瀏覽器中加載時，“Newest”在下拉菜單中被選中。這是因?yàn)槲覀冊诳刂破髦邪?code>orderProp設(shè)置成了‘a(chǎn)ge’。所以綁定在從我們模型到用戶界面的方向上起作用——即數(shù)據(jù)從模型到視圖的綁定?，F(xiàn)在當(dāng)你在下拉菜單中選擇“Alphabetically”，數(shù)據(jù)模型會被同時更新，并且手機(jī)列表數(shù)組會被重新排序。這個時候數(shù)據(jù)綁定從另一個方向產(chǎn)生了作用——即數(shù)據(jù)從視圖到模型的綁定。

測試

我們所做的更改可以通過一個單元測試或者一個端到端測試來驗(yàn)證正確性。我們首先來看看單元測試：

test/unit/controllersSpec.js：

describe('PhoneCat controllers', function() {

  describe('PhoneListCtrl', function(){
    var scope, ctrl;

    beforeEach(function() {
      scope = {},
      ctrl = new PhoneListCtrl(scope);
    });

    it('should create "phones" model with 3 phones', function() {
      expect(scope.phones.length).toBe(3);
    });

    it('should set the default value of orderProp model', function() {
      expect(scope.orderProp).toBe('age');
    });
  });
});

單元測試現(xiàn)在驗(yàn)證了默認(rèn)值被正確設(shè)置。

我們使用Jasmine的接口把PhoneListCtrl控制器提取到一個beforeEach塊中，這個塊會被所有的父塊describe中的所有測試所共享。

運(yùn)行這些單元測試，跟以前一樣，執(zhí)行./scripts/test.sh腳本，你應(yīng)該會看到如下輸出（注意：要在瀏覽器打開http://localhost:9876并進(jìn)入嚴(yán)格模式，測試才會運(yùn)行！）：

Chrome: Runner reset.
..
Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (3.00 ms)
  Chrome 19.0.1084.36 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (3.00 ms)

現(xiàn)在我們把注意力轉(zhuǎn)移到端到端測試上來。

test/e2e/scenarios.js：

...
    it('should be possible to control phone order via the drop down select box',
        function() {
      //let's narrow the dataset to make the test assertions shorter
      input('query').enter('tablet');

      expect(repeater('.phones li', 'Phone List').column('phone.name')).
          toEqual(["Motorola XOOM\u2122 with Wi-Fi",
                   "MOTOROLA XOOM\u2122"]);

      select('orderProp').option('Alphabetical');

      expect(repeater('.phones li', 'Phone List').column('phone.name')).
          toEqual(["MOTOROLA XOOM\u2122",
                   "Motorola XOOM\u2122 with Wi-Fi"]);
    });
...

端到端測試驗(yàn)證了選項(xiàng)框的排序機(jī)制是正確的。

你現(xiàn)在可以刷新你的瀏覽器，然后重新跑一遍端到端測試，或者你可以在AngularJS的服務(wù)器上運(yùn)行一下。

練習(xí)

• 在PhoneListCtrl控制器中，把設(shè)置orderProp那條語句刪掉，你會看到AngularJS會在下拉菜單中臨時添加一個空白的選項(xiàng)，并且排序順序是默認(rèn)排序（即未排序）。
• 在index.html模板里面添加一個`{{orderProp}}綁定來實(shí)時顯示它的值。

總結(jié)

現(xiàn)在你已經(jīng)為你的應(yīng)用提供了搜索功能，并且完整的進(jìn)行了測試。步驟5我們將學(xué)習(xí)AngularJS的服務(wù)以及AngularJS如何使用依賴注入。