EVOLUTION-MANAGER
Edit File: step_04.html
<a href='https://github.com/angular/angular.js/edit/v1.3.x/docs/content/tutorial/step_04.ngdoc?message=docs(tutorial%2F4 - Two-way Data Binding)%3A%20describe%20your%20change...' class='improve-docs btn btn-primary'><i class="glyphicon glyphicon-edit"> </i>Improve this Doc</a> <ul doc-tutorial-nav="4"></ul> <p>In this step, you will add a feature to let your users control the order of the items in the phone list. The dynamic ordering is implemented by creating a new model property, wiring it together with the repeater, and letting the data binding magic do the rest of the work.</p> <ul> <li>In addition to the search box, the app displays a drop down menu that allows users to control the order in which the phones are listed.</li> </ul> <div doc-tutorial-reset="4"></div> <h2 id="template">Template</h2> <p><strong><code>app/index.html</code>:</strong></p> <pre><code class="lang-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> </code></pre> <p>We made the following changes to the <code>index.html</code> template:</p> <ul> <li>First, we added a <code><select></code> html element named <code>orderProp</code>, so that our users can pick from the two provided sorting options.</li> </ul> <p><img class="diagram" src="img/tutorial/tutorial_04.png"></p> <ul> <li>We then chained the <code>filter</code> filter with <a href="api/ng/filter/orderBy"><code>orderBy</code></a> filter to further process the input into the repeater. <code>orderBy</code> is a filter that takes an input array, copies it and reorders the copy which is then returned.</li> </ul> <p>Angular creates a two way data-binding between the select element and the <code>orderProp</code> model. <code>orderProp</code> is then used as the input for the <code>orderBy</code> filter.</p> <p>As we discussed in the section about data-binding and the repeater in step 3, whenever the model changes (for example because a user changes the order with the select drop down menu), Angular's data-binding will cause the view to automatically update. No bloated DOM manipulation code is necessary!</p> <h2 id="controller">Controller</h2> <p><strong><code>app/js/controllers.js</code>:</strong></p> <pre><code class="lang-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'; }); </code></pre> <ul> <li><p>We modified the <code>phones</code> model - the array of phones - and added an <code>age</code> property to each phone record. This property is used to order phones by age.</p> </li> <li><p>We added a line to the controller that sets the default value of <code>orderProp</code> to <code>age</code>. If we had not set a default value here, the <code>orderBy</code> filter would remain uninitialized until our user picked an option from the drop down menu.</p> <p>This is a good time to talk about two-way data-binding. Notice that when the app is loaded in the browser, "Newest" is selected in the drop down menu. This is because we set <code>orderProp</code> to <code>'age'</code> in the controller. So the binding works in the direction from our model to the UI. Now if you select "Alphabetically" in the drop down menu, the model will be updated as well and the phones will be reordered. That is the data-binding doing its job in the opposite direction — from the UI to the model.</p> </li> </ul> <h2 id="test">Test</h2> <p>The changes we made should be verified with both a unit test and an end-to-end test. Let's look at the unit test first.</p> <p><strong><code>test/unit/controllersSpec.js</code>:</strong></p> <pre><code class="lang-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'); }); }); }); </code></pre> <p>The unit test now verifies that the default ordering property is set.</p> <p>We used Jasmine's API to extract the controller construction into a <code>beforeEach</code> block, which is shared by all tests in the parent <code>describe</code> block.</p> <p>You should now see the following output in the Karma tab:</p> <pre>Chrome 22.0: Executed 2 of 2 SUCCESS (0.021 secs / 0.001 secs)</pre> <p>Let's turn our attention to the end-to-end test.</p> <p><strong><code>test/e2e/scenarios.js</code>:</strong></p> <pre><code class="lang-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" ]); });... </code></pre> <p>The end-to-end test verifies that the ordering mechanism of the select box is working correctly.</p> <p>You can now rerun <code>npm run protractor</code> to see the tests run.</p> <h1 id="experiments">Experiments</h1> <ul> <li><p>In the <code>PhoneListCtrl</code> controller, remove the statement that sets the <code>orderProp</code> value and you'll see that Angular will temporarily add a new blank ("unknown") option to the drop-down list and the ordering will default to unordered/natural order.</p> </li> <li><p>Add an <code>{{orderProp}}</code> binding into the <code>index.html</code> template to display its current value as text.</p> </li> <li><p>Reverse the sort order by adding a <code>-</code> symbol before the sorting value: <code><option value="-age">Oldest</option></code></p> </li> </ul> <h1 id="summary">Summary</h1> <p>Now that you have added list sorting and tested the app, go to <a href="tutorial/step_05">step 5</a> to learn about Angular services and how Angular uses dependency injection.</p> <ul doc-tutorial-nav="4"></ul>