本章節(jié)中揍魂，我們將為之前展示的手機(jī)信息列表提供一個(gè)排序功能桨醋。要想實(shí)現(xiàn)動(dòng)態(tài)排序的功能，我們只需要新建一個(gè)模型屬性现斋，并且把它和循環(huán)器綁定在一起喜最，剩下的就交給數(shù)據(jù)綁定去完成了。
相比上一章中的例子庄蹋，本章中的例子多添加了一個(gè)下拉菜單瞬内，它允許用戶自己控制手機(jī)列表的顯示順序。首先我們把代碼切換到step-4：
git checkout -f step-4
刷新瀏覽器查看效果（假設(shè)之前你已經(jīng)運(yùn)行了上一章的例子）限书。你可以在線看效果虫蝶。
模版
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">
<span>{{phone.name}}</span>
<p>{{phone.snippet}}</p>
</li>
</ul>
代碼對(duì)index.html主要做了以下幾點(diǎn)改動(dòng)：
- 第一布我們添加一個(gè)名為
orderProp的<select>標(biāo)簽元素，這樣用戶就能從提供的兩種排序中選擇自己想要的排序方式了倦西。
- 第二步我們?cè)僦暗?code>filter過濾器鏈中添加一個(gè)
orderBy過濾器用來對(duì)結(jié)果進(jìn)行排序能真。orderBy過濾器的輸入為一個(gè)數(shù)組，對(duì)其進(jìn)行排序并且返回排序后的數(shù)組。
這個(gè)例子中粉铐，Angular在<select>元素和orderProp數(shù)據(jù)模型之間建立雙向數(shù)據(jù)綁定疼约，然后orderBy過濾器就可以用它作為輸入，并且返回結(jié)果了蝙泼。
上一章中我們討論了關(guān)于循環(huán)器的數(shù)據(jù)綁定程剥，只要模型數(shù)據(jù)發(fā)生變化（比如用戶下拉排序菜單選擇了不通的排序方式），Angular的數(shù)據(jù)綁定功能將確保頁面會(huì)同步展示最新結(jié)果汤踏。其他的手工控制代碼都不用自己寫织鲸。
控制器
app/js/controllers.js:
var phonecatApp = angular.module('phonecatApp', []);
phonecatApp.controller('PhoneListCtrl', function ($scope) {
$scope.phones = [
{'name': 'Nexus S',
'snippet': 'Fast just got faster with Nexus S.',
'age': 1},
{'name': 'Motorola XOOM? with Wi-Fi',
'snippet': 'The Next, Next Generation tablet.',
'age': 2},
{'name': 'MOTOROLA XOOM?',
'snippet': 'The Next, Next Generation tablet.',
'age': 3}
];
$scope.orderProp = 'age';
});
上述代碼主要包含以下改動(dòng)：
- 首先我們修改了
phones數(shù)據(jù)模型，為每條手機(jī)記錄添加了一個(gè)age屬性茎活。頁面將支持根據(jù)這個(gè)屬性來排序昙沦。 - 另外我們?cè)诮酉聛淼囊恍兄邪?code>orderProp的默認(rèn)值設(shè)成
age（告訴頁面第一次載入時(shí)按照age排序）。如果這里沒有設(shè)置默認(rèn)值载荔，頁面在載入的時(shí)候?qū)⑹俏磁判蜻^的盾饮，直到用戶從下拉菜單中選擇了一個(gè)排序方式。
這個(gè)例子能非常好的說明雙向綁定這個(gè)概念懒熙。當(dāng)頁面載入后丘损，我們可以看到下拉框顯示的是"Newest"，這是因?yàn)槲覀儼?code>orderProp默認(rèn)設(shè)置為了age工扎。這是一次從數(shù)據(jù)模型到UI的單向綁定徘钥。另外一方面，當(dāng)我們選擇下拉菜單的"Alphabetical"肢娘，后臺(tái)中的手機(jī)數(shù)組列表就會(huì)被重新排列呈础，這就是從UI到數(shù)據(jù)模型的單向綁定。這兩者結(jié)合起來橱健，就是數(shù)據(jù)的雙向綁定了而钞。
測(cè)試
這次的改動(dòng)將涉及單元測(cè)試和E2E測(cè)試兩個(gè)測(cè)試。我們先看以下單元測(cè)試：
test/unit/controllersSpec.js:
describe('PhoneCat controllers', function() {
describe('PhoneListCtrl', function(){
var scope, ctrl;
beforeEach(module('phonecatApp'));
beforeEach(inject(function($controller) {
scope = {};
ctrl = $controller('PhoneListCtrl', {$scope: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è)試代碼將驗(yàn)證orderProp默認(rèn)值是否設(shè)置成功拘荡。
我們使用了Jasmine的API來把控制器的構(gòu)造過程抽取出來放入了beforeEach模塊中臼节，這將使得它能被父模塊describe中的所有測(cè)試所共享。
你將會(huì)從Karma的控制臺(tái)輸出中看到以下消息：
Chrome 22.0: Executed 2 of 2 SUCCESS (0.021 secs / 0.001 secs)
下面讓我們來看看E2E測(cè)試珊皿，以下是代碼：
test/e2e/scenarios.js:
...
it('should be possible to control phone order via the drop down select box', function() {
var phoneNameColumn = element.all(by.repeater('phone in phones').column('phone.name'));
var query = element(by.model('query'));
function getNames() {
return phoneNameColumn.map(function(elm) {
return elm.getText();
});
}
query.sendKeys('tablet'); //let's narrow the dataset to make the test assertions shorter
expect(getNames()).toEqual([
"Motorola XOOM\u2122 with Wi-Fi",
"MOTOROLA XOOM\u2122"
]);
element(by.model('orderProp')).element(by.css('option[value="name"]')).click();
expect(getNames()).toEqual([
"MOTOROLA XOOM\u2122",
"Motorola XOOM\u2122 with Wi-Fi"
]);
});...
E2E測(cè)試將用來驗(yàn)證下拉選擇框的排序功能是否正常网缝。你可以通過npm run protractor來運(yùn)行這個(gè)測(cè)試用例。
實(shí)驗(yàn)小能手
- 在
PhoneListCtrl控制器代碼中蟋定，把$scope.orderProp = 'age';這句話注釋掉粉臊，然后你就會(huì)看到Angular會(huì)為頁面上的下拉框添加了一個(gè)新的空白選項(xiàng)(Unknown)，并且當(dāng)前的列表也是未經(jīng)排序的驶兜。 - 添加一個(gè){{orderProp}}數(shù)據(jù)綁定用來查看當(dāng)前的排序方式维费。
- 想要倒排某個(gè)排序果元？很簡(jiǎn)單，嘗試添加一個(gè)新的select選項(xiàng)：
<option value="-age">Oldest</option>犀盟。
總結(jié)
現(xiàn)在我們已經(jīng)為網(wǎng)站添加了排序功能而晒，下一章，我們將學(xué)習(xí)Angular的服務(wù)體系和依賴注入阅畴。
