(public).sospep.systems ~ view step ~ step-004-data-binding-2-way

<h1 style="text-align: center;">step-004 - data binding</h1>
<ol>
<li>[00:00] NEW step IN</li>
<ol>
<li>x] git checkout -f step-4 - resets app code for this example</li>
<li>*] index page now displays ...</li>
</ol>
<li>[00:00] NEW step IN</li>
<ol>
<li>] ADDed select box to enable user to choose ordering of displayed data set</li>
<li>] UPDATED ng-repeat directive to add ___ 'orderBy"</li>
<li>] UPDATED model to include 'orderBy property'</li>
</ol></ol>
&nbsp;
<h1 style="text-align: center;">need to know</h1>
<ol>
<li>template</li>
<ol>
<li>x] ADDed a select box for sorting, with ng-model="OrderBy" directive, options are name and age</li>
<li>x] ADDed&nbsp;a |OrderBy:{{orderProp}} to the ng-repeat&nbsp;directive on the li &nbsp;</li>
<ol>
<li>&nbsp;ng-repeat="phone in phones | filter:query | orderBy:orderProp"&gt;</li>
</ol>
<li>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. 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!</li>
</ol>
<li>controller</li>
<ol>
<li>] added an 'age' property to each of the phones in the phones array</li>
<li>] added an orderProp var to the scope , setting the default value of orderProp to 'age'</li>
<ol>
<li>]&nbsp; $scope.orderProp ='age';</li>
</ol>
<li>]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 &mdash; from the UI to the model.</li>
</ol>
<li>test</li>
<ol>
<li>] 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.</li>
<ol>
<li>]&nbsp; it('should set the default value of orderProp model',function(){ expect(scope.orderProp).toBe('age');</li>
</ol>
<li>] The unit test now verifies that the default ordering property is set. 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. </li>
</ol>
<li>experiments </li>
<ol>
<li>] Reverse the sort order by adding a <code>-</code> symbol before the sorting value: <code>&lt;optionvalue="-age"&gt;Oldest&lt;/option&gt;</code></li>
</ol>
<li>summary</li>
<ol>
<li>] added list sorting and tested the app, go to <a href="https://docs.angularjs.org/tutorial/step_05" target="_blank">step 5</a> to learn about Angular services and how Angular uses dependency injection.</li>
<li>] REF <a href="https://docs.angularjs.org/tutorial/step_04" target="_blank">https://docs.angularjs.org/tutorial/step_04</a></li>
</ol></ol>

~ view step ~ Procedure] angular-tutorial FROM [ App] framework-angular IN [ servers] technology-developer-www