diff options
Diffstat (limited to 'docs/content/tutorial/step_04.ngdoc')
| -rw-r--r-- | docs/content/tutorial/step_04.ngdoc | 39 |
1 files changed, 18 insertions, 21 deletions
diff --git a/docs/content/tutorial/step_04.ngdoc b/docs/content/tutorial/step_04.ngdoc index 900a0340..ca452b59 100644 --- a/docs/content/tutorial/step_04.ngdoc +++ b/docs/content/tutorial/step_04.ngdoc @@ -2,7 +2,7 @@ @name Tutorial: 4 - Two-way Data Binding @description -<ul doc:tutorial-nav="4"></ul> +<ul doc-tutorial-nav="4"></ul> In this step, you will add a feature to let your users control the order of the items in the phone @@ -10,7 +10,7 @@ list. The dynamic ordering is implemented by creating a new model property, wiri the repeater, and letting the data binding magic do the rest of the work. -<doc:tutorial-instructions step="4"></doc:tutorial-instructions> +<div doc-tutorial-reset="4"></div> You should see that in addition to the search box, the app displays a drop down menu that allows @@ -24,23 +24,20 @@ The most important differences between Steps 3 and 4 are listed below. You can s __`app/index.html`:__ <pre> -... - 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> -... + 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> </pre> We made the following changes to the `index.html` template: @@ -48,7 +45,7 @@ We made the following changes to the `index.html` template: * First, we added a `<select>` html element named `orderProp`, so that our users can pick from the two provided sorting options. - <img src="img/tutorial/tutorial_04.png"> + <img class="diagram" src="img/tutorial/tutorial_04.png"> * We then chained the `filter` filter with {@link api/angular.module.ng.$filter.orderBy `orderBy`} filter to further process the input into the repeater. `orderBy` is a filter that takes an input @@ -191,4 +188,4 @@ Now that you have added list sorting and tested the app, go to {@link step_05 st about Angular services and how Angular uses dependency injection. -<ul doc:tutorial-nav="4"></ul> +<ul doc-tutorial-nav="4"></ul> |