AngularJS学习--- AngularJS中数据双向绑定(two-way data-binding) orderBy step4

1.切换工作目录

git checkout step-4  #切换分支,切换到第4步
npm start  #启动项目

2.代码

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>

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

3.效果

amosli@amosli-pc:~/develop/angular-phonecat/test/e2e$ cat scenarios.js
'use strict';

/* http://docs.angularjs.org/guide/dev_guide.e2e-testing */

describe('PhoneCat App', function() {

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

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

it('should filter the phone list as 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);
});

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')).findElement(by.css('option[value="name"]')).click();

expect(getNames()).toEqual([
"MOTOROLA XOOM\u2122",
"Motorola XOOM\u2122 with Wi-Fi"
]);
});
});
});