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

請(qǐng)重置工作目錄：

git checkout -f step-4

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

步驟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>

我們?cè)趇ndex.html中做了如下更改：

首先，我們?cè)黾恿艘粋€(gè)叫做orderProp的<select>標(biāo)簽，這樣我們的用戶就可以選擇我們提供的兩種排序方法。

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

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

正如我們?cè)诓襟E3中討論數(shù)據(jù)綁定和迭代器的時(shí)候所說的一樣，無論什么時(shí)候數(shù)據(jù)模型發(fā)生了改變（比如用戶在下拉菜單中選了不同的順序），AngularJS的數(shù)據(jù)綁定會(huì)讓視圖自動(dòng)更新。沒有任何笨拙的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ù)組 ——為每一個(gè)手機(jī)記錄其增加了一個(gè)age屬性。我們會(huì)根據(jù)age屬性來對(duì)手機(jī)進(jìn)行排序。

我們?cè)诳刂破鞔a里加了一行讓orderProp的默認(rèn)值為age。如果我們不設(shè)置默認(rèn)值，這個(gè)模型會(huì)在我們的用戶在下拉菜單選擇一個(gè)順序之前一直處于未初始化狀態(tài)。

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

測(cè)試

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

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');
  });
 });
});

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

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

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

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)移到端到端測(cè)試上來。

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"]);
  });
...

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

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

練習(xí)

在PhoneListCtrl控制器中，把設(shè)置orderProp那條語句刪掉，你會(huì)看到AngularJS會(huì)在下拉菜單中臨時(shí)添加一個(gè)空白的選項(xiàng)，并且排序順序是默認(rèn)排序（即未排序）。

在index.html模板里面添加一個(gè)`{{orderProp}}綁定來實(shí)時(shí)顯示它的值。

總結(jié)

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

以上就是對(duì)AngularJS 雙向綁定的資料整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料，謝謝大家對(duì)本站的支持！

最新評(píng)論