AngularJS learning --- data bidirectional binding (two-way data-binding) in AngularJS orderBy step4

1. switch to the working directory git checkout step-4 # Switch to the branch and switch to step 2 npm start # start Project 2. code app/index.html copy Code Search: <input ng-model = "query"> Sort: <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> copy the code app/controllers. js copy code var phonecatApp = angular. module ('python', []); phonecatApp. controller ('pythonelistctrl ', function ($ scope) {$ scope. phones = [{'name': 'nexus s', 'snippet ': 'fast just got faster with Nexus S. ', 'age': 1}, {'name': 'motorola XOOM™With Wi-Fi ', 'snippet': 'Next, Next Generation tablet. ', 'age': 2}, {'name': 'motorola XOOM™', 'Snippet': 'the Next, Next Generation tablet. ', 'age': 3}]; $ scope. orderProp = 'age';}); copy code 3. sort results by letter: sort by Time: Obviously, compared with step-3, step-4 adds the sorting function 4. first, the <select> label is added: <select ng-model = "orderProp"> <option value = "name"> Alphabetical </option> <option value = "age"> Newest </option> </select> second, orderBy: <li ng-repeat = "phone in phones | filter: query | orderBy: orderProp" >{{ phone. name }}< p >{{ pho Ne. snippet }}</p> </li> therefore, according to angularjs ideas, model changes (may be caused by manually selecting the drop-down box ), according to the data-binding principle, the view will also be changed in a timely manner. orderBy api: https://docs.angularjs.org/api/ng/filter/orderBy orderBy Usage (Usage) In HTML Template Binding (Usage In HTML) {orderBy_expression | orderBy: expression: reverse} In JavaScript (Usage In JS) $ filter ('orderby') (array, expression, reverse) the above example is used in HTML. By default, string data is sorted by alphabet, the data of the number type is Sort by number. if you want to reverse the order, you can add a '-' to the option value = '-name' above. 5. test and copy the code amosli @ amosli-pc :~ /Develop/angular-phonecat $ npm run protractor> angular-phonecat@0.0.0 preprotractor/home/amosli/develop/angular-phonecat> npm run update-webdriver> angular-phonecat@0.0.0 preupdate-webdriver/home/amosli/develop /angular-phonecat> npm install> angular-phonecat@0.0.0 postinstall/home/amosli/develop/angular-phonecat> bower install> angular-phonecat@0.0.0 update-webdriver/home/amosli/develop/ang Ular-phonecat> webdriver-manager update selenium standalone is up to date. chromedriver is up to date.> angular-phonecat@0.0.0 protractor/home/amosli/develop/angular-phonecat> protractor test/protractor-conf.js license PID: 5265 (capability: chrome #1) ------------------------------------ Using ChromeDriver directly ..... finished in 5.033 seconds2 tests, 5 assertions, 0 Failures: copy the code and perform an end-to-end test. The test code is as follows: angular-phonecat/test/e2e/scenarios. js 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 ('could filter the phone list as user types into the search box', function () {var phoneList = element. all (. repeater ('phone in phones'); var query = element (. model ('query'); Round CT (phoneList. count ()). toBe (3); query. sendKeys ('nexus '); Round CT (phoneList. count ()). toBe (1); query. clear (); query. sendKeys ('motorola '); Clinical CT (phoneList. count ()). toBe (2) ;}); it ('could be possible to control phone order via the drop down select box', function () {var phoneNameColumn = element. all (. repeater ('phone in phones '). column ('{phone. name} '); var query = element (. 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 Except CT (getNames ()). toEqual (["Motorola XOOM \ u2122 with Wi-Fi", "motorola xoom \ u2122"]); element(by.model('orderprop'{}.findelement(by.css ('option [value = "name"] '). click (); getNames ()). toEqual (["motorola xoom \ u2122", "Motorola XOOM \ u2122 with Wi-Fi"]) ;});