<div class="container-fluid">
 <div class="row-fluid">
  <div class="span2">
   <!--Sidebar content-->

   Search: <input ng-model="query">

  </div>
  <div class="span10">
   <!--Body content-->

   <ul class="phones">
    <li ng-repeat="phone in phones | filter:query">
     {{phone.name}}
    <p>{{phone.snippet}}</p>
    </li>
   </ul>

    </div>
 </div>
</div>

我們現在添加了一個<input>標簽，并且使用AngularJS的$filter函數來處理ngRepeat指令的輸入。

這樣允許用戶輸入一個搜索條件，立刻就能看到對電話列表的搜索結果。我們來解釋一下新的代碼：

數據綁定：這是AngularJS的一個核心特性。當頁面加載的時候，AngularJS會根據輸入框的屬性值名字，將其與數據模型中相同名字的變量綁定在一起，以確保兩者的同步性。

在這段代碼中，用戶在輸入框中輸入的數據名字稱作query，會立刻作為列表迭代器（phone in phones | filter:query`）其過濾器的輸入。當數據模型引起迭代器輸入變化的時候，迭代器可以高效得更新DOM將數據模型最新的狀態(tài)反映出來。

使用filter過濾器：filter函數使用query的值來創(chuàng)建一個只包含匹配query記錄的新數組。

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

測試

在步驟2，我們學習了編寫和運行一個測試的方法。單元測試用來測試我們用js編寫的控制器和其他組件都非常方便，但是不能方便的對DOM操作和應用集成進行測試。對于這些來說，端到端測試是一個更好的選擇。

搜索特性是完全通過模板和數據綁定實現的，所以我們的第一個端到端測試就來驗證這些特性是否符合我們的預期。

test/e2e/scenarios.js：

describe('PhoneCat App', function() {

 describe('Phone list view', function() {

  beforeEach(function() {
   browser().navigateTo('../../app/index.html');
  });


  it('should filter the phone list as user types into the search box', function() {
   expect(repeater('.phones li').count()).toBe(3);

   input('query').enter('nexus');
   expect(repeater('.phones li').count()).toBe(1);

   input('query').enter('motorola');
   expect(repeater('.phones li').count()).toBe(2);
  });
 });
});

盡管這段測試代碼的語法看起來和我們之前用Jasmine寫的單元測試非常像，但是端到端測試使用的是AngularJS端到端測試器提供的接口。

運行一個端到端測試，在瀏覽器新標簽頁中打開下面任意一個：

node.js用戶：http://localhost:8000/test/e2e/runner.html

使用其他http服務器的用戶：http://localhost:[port-number]/[context-path]/test/e2e/runner.html

訪客：http://angular.github.com/angular-phonecat/step-3/test/e2e/runner.html

這個測試驗證了搜素框和迭代器被正確地集成起來。你可以發(fā)現，在AngularJS里寫一個端到端測試多么的簡單。盡管這個例子僅僅是一個簡單的測試，但是用它來構建任何一個復雜、可讀的端到端測試都很容易。

練習

在index.html模板中添加一個{{query}}綁定來實時顯示query模型的當前值，然后觀察他們是如何根據輸入框中的值而變化。
現在我們來看一下我們怎么讓query模型的值出現在HTML的頁面標題上。

你或許認為像下面這樣在title標簽上加上一個綁定就行了：

<title>Google Phone Gallery: {{query}}</title>

但是，當你重載頁面的時候，你根本沒辦法得到期望的結果。這是因為query模型僅僅在body元素定義的作用域內才有效。

如果你想讓<title>元素綁定上query模型，你必須把ngController聲明移動到HTML元素上，因為它是title和body元素的共同祖先。

一定要注意把body元素上的ng-controller聲明給刪了。

當綁定兩個花括號在title元素上可以實現我們的目標，但是你或許發(fā)現了，頁面正加載的時候它們已經顯示給用戶看了。一個更好的解決方案是使用ngBind或者ngBindTemplate指令，它們在頁面加載時對用戶是不可見的：

<title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title>

在test/e2e/scenarios.js的describe塊中加入下面這些端到端測試代碼：

it('should display the current filter value within an element with id "status"',
  function() {
    expect(element('#status').text()).toMatch(/Current filter: \s*$/);
    input('query').enter('nexus');
    expect(element('#status').text()).toMatch(/Current filter: nexus\s*$/);
    //alternative version of the last assertion that tests just the value of the binding
    using('#status').expect(binding('query')).toBe('nexus');
});

刷新瀏覽器，端到端測試器會報告測試失敗。為了讓測試通過，編輯index.html，添加一個id為“status”的div或者p元素，內容是一個query綁定，再加上Current filter:前綴。例如：

<div id="status">Current filter: {{query}}</div>

在端到端測試里面加一條pause();語句，重新跑一遍。你將發(fā)現測試器暫停了！這樣允許你有機會在測試運行過程中查看你應用的狀態(tài)。測試應用是實時的！你可以更換搜索內容來證明。稍有經驗你就會知道，這對于在端到端測試中迅速找到問題是多么的關鍵。

總結

我們現在添加了全文搜索功能，并且完成一個測試證明了搜索是對的！現在讓我們繼續(xù)到步驟4來看看給我們的手機應用增加排序功能。

以上就是對AngularJS 迭代器過濾資料整理，后續(xù)繼續(xù)補充相關資料，謝謝大家對本站的支持！

您可能感興趣的文章: