免費AI編程助手
AngularJS 篩選迭代器
篩選迭代器
我們在上一步中為開發(fā)應用打基礎做了很多工作，現(xiàn)在我們將做一些簡單的事情；我們將添加全文搜索（是的，它很簡單！）。我們還將編寫一個端到端測試，因為一個好的端到端測試可以幫上大忙。它監(jiān)視著你的應用，并在發(fā)生回歸時迅速報告。
- 現(xiàn)在應用有了一個搜索框。注意頁面上的手機列表的變化取決于用戶在搜索框中打了什么字。
把工作空間重置到第三步
git checkout -f step-3刷新你的瀏覽器或在線檢查這一步：Step 3 Live Demo
下面列出了第二步和第三步之間最重要的區(qū)別。你可以在GitHub里看到完整的差異。
控制器
我們對控制器不作修改。
模板
app/index.html:
<div class="container-fluid">
<div class="row">
<div class="col-md-2">
<!--Sidebar content-->
Search: <input ng-model="query">
</div>
<div class="col-md-10">
<!--Body content-->
<ul class="phones">
<li ng-repeat="phone in phones | filter:query">
{{phone.name}}
<p>{{phone.snippet}}</p>
</li>
</ul>
</div>
</div>
</div>我們添加了一個標準HTML<input>元素標記，并使用Angular的filter函數(shù)來處理repeat指令的輸入。
這使用戶輸入搜索條件，并在手機列表中快速看到搜索結(jié)果。新的代碼演示如下：
數(shù)據(jù)綁定：這是Angular的一個核心功能。當網(wǎng)頁載入時，Angular把輸入框的名稱綁定到數(shù)據(jù)模塊的同名的變量上，并保持兩者同步。
在代碼中，用戶打字到輸入框的數(shù)據(jù)（命名為
query）很快可以作為一個篩選器輸入到列表迭代器（phone in phones | filter:query）中。在改變數(shù)據(jù)模塊的時候，導致迭代器的輸入發(fā)生變化，迭代器有效地更新了DOM，以反映模塊的當前狀態(tài)。
使用
filter篩選器：filter函數(shù)使用了query值發(fā)創(chuàng)建一個新的數(shù)列，只包含匹配query的記錄。ngRepeat自動更新了視力，以響應filter篩選器返回的手機數(shù)字的變化。該處理對開發(fā)者來說是完全透明的。
測試
在第二步中，我們學會了如何編寫并運行單元測試。對于測試我們的用JavaScript編寫的應用程序的控制器和其它組件，單元測試是完美的，但是測試DOM操作或測試我們的應用程序的接通不太方便。針對這些，一個端到端的測試是一個更好的選擇。
該搜索功能完全是通過模板和數(shù)據(jù)綁定來實現(xiàn)的，我們將編寫我們第一個端到端的測試，以驗證該功能起了什么作用。
test/e2e/scenarios.js:
describe('PhoneCat App', function() {
describe('Phone list view', function() {
beforeEach(function() {
browser.get('app/index.html');
});
it('should filter the phone list as a user types into the search box', function() {
var phoneList = element.all(by.repeater('phone in phones'));
var query = element(by.model('query'));
expect(phoneList.count()).toBe(3);
query.sendKeys('nexus');
expect(phoneList.count()).toBe(1);
query.clear();
query.sendKeys('motorola');
expect(phoneList.count()).toBe(2);
});
});
});這個測試驗證了搜索框以及迭代器是否正確地接通了。注意，在Angular中，編寫端到端測試是如此地容易。雖然這個示例只針對一個簡單的測試，但是它確實很容易測試任何功能化的、可讀的、端到端的測試。
利用Protractor運行端到端的測試
甚至雖然測試的句法看起來很像我們的用Jasmine編寫的控制器單元測試，但是端到端測試使用Protractor的API。在http://angular.github.io/protractor/#/api可以讀到Protractor的API。
與Karma很像的是針對單元測試的測試運行者，我們使用Protractor以運行端到端測試。用npm run protractor來嘗試它。端到端測試很慢，所以與單元測試不同，在運行測試之后Protractor將退出，不會自動在每次文件更改時重新運行測試套裝。要想重新運行測試套裝，需要再次執(zhí)行npm run protractor。
實驗
顯示當前查詢
通過添加一個綁定到index.html模板的{{query}}來顯示query模塊當前的值，并看到當你在輸入框中打字時，它如何變化。
在標題中顯示查詢
讓我們看到我們可以取得query模板的當前值，模塊出現(xiàn)在HTML網(wǎng)頁的標題上。
把一個端到端測試添加到
describe塊中，test/e2e/scenarios.js看起來將如這：describe('PhoneCat App', function() { describe('Phone list view', function() { beforeEach(function() { browser.get('app/index.html'); }); var phoneList = element.all(by.repeater('phone in phones')); var query = element(by.model('query')); it('should filter the phone list as a user types into the search box', function() { expect(phoneList.count()).toBe(3); query.sendKeys('nexus'); expect(phoneList.count()).toBe(1); query.clear(); query.sendKeys('motorola'); expect(phoneList.count()).toBe(2); }); it('should display the current filter value in the title bar', function() { query.clear(); expect(browser.getTitle()).toMatch(/Google Phone Gallery:\s*$/); query.sendKeys('nexus'); expect(browser.getTitle()).toMatch(/Google Phone Gallery: nexus$/); }); }); });運行protractor（
npm run protractor），看到測試失敗了。你可能認為你只需要用以下方式向標題標簽添加
{{query}}：<title>Google Phone Gallery: {{query}}</title>然而，當你重載入這個網(wǎng)頁的時候，你不會看到想要的結(jié)果。這是因為“查詢”模塊駐留在作用域內(nèi)，由
ng-controller="PhoneListCtrl"指令在body元素上定義。<body ng-controller="PhoneListCtrl">如果你想要從
<title>元素上綁定查詢模塊，你必須把ngController聲明移動到HTML元素上，因為它是body元素和title元素常用的父元素。<html ng-app="phonecatApp" ng-controller="PhoneListCtrl">確保從body元素中移除
ng-controller聲明。重新運行
rpm run protractor，看到現(xiàn)在測試已經(jīng)看通過了。在title元素內(nèi)部使用雙花工作得很好，與此同時，你可能會注意到頁面加載的一瞬間它們確實顯示給用戶了。一個更好的解決方案是使用ngBind指令或ngBindTemplate指令，當頁面加載時用戶能看到它們。
<title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title>
總結(jié)
我們現(xiàn)在已經(jīng)把全文搜索添加上去了，還包含了一個用來驗證搜索是否起作用的測試！現(xiàn)在讓我們前往第四步 雙路數(shù)據(jù)綁定以學會如何向手機應用添加排序功能。
更多建議：