diff options
Diffstat (limited to 'docs/content/tutorial/step_04.ngdoc')
| -rw-r--r-- | docs/content/tutorial/step_04.ngdoc | 76 |
1 files changed, 34 insertions, 42 deletions
diff --git a/docs/content/tutorial/step_04.ngdoc b/docs/content/tutorial/step_04.ngdoc index 39e8eeec..900a0340 100644 --- a/docs/content/tutorial/step_04.ngdoc +++ b/docs/content/tutorial/step_04.ngdoc @@ -25,25 +25,21 @@ The most important differences between Steps 3 and 4 are listed below. You can s __`app/index.html`:__ <pre> ... - <ul class="controls"> - <li> - Search: <input ng-model="query"> - </li> - <li> - Sort by: - <select ng-model="orderProp"> - <option value="name">Alphabetical</option> - <option value="age">Newest</option> - </select> - </li> - </ul> - - <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> @@ -72,18 +68,18 @@ necessary! __`app/js/controller.js`:__ <pre> -/* App Controllers */ - function PhoneListCtrl($scope) { - $scope.phones = [{"name": "Nexus S", - "snippet": "Fast just got faster with Nexus S.", - "age": 0}, - {"name": "Motorola XOOM™ with Wi-Fi", - "snippet": "The Next, Next Generation tablet.", - "age": 1}, - {"name": "MOTOROLA XOOM™", - "snippet": "The Next, Next Generation tablet.", - "age": 2}]; + $scope.phones = [ + {"name": "Nexus S", + "snippet": "Fast just got faster with Nexus S.", + "age": 0}, + {"name": "Motorola XOOM™ with Wi-Fi", + "snippet": "The Next, Next Generation tablet.", + "age": 1}, + {"name": "MOTOROLA XOOM™", + "snippet": "The Next, Next Generation tablet.", + "age": 2} + ]; $scope.orderProp = 'age'; } @@ -114,11 +110,11 @@ __`test/unit/controllerSpec.js`:__ <pre> describe('PhoneCat controllers', function() { - describe('PhoneListCtrl', function() { - var scope, $browser, ctrl; + describe('PhoneListCtrl', function(){ + var scope, ctrl; beforeEach(function() { - scope = {}; + scope = {}, ctrl = new PhoneListCtrl(scope); }); @@ -147,7 +143,7 @@ following output. Chrome: Runner reset. .. Total 2 tests (Passed: 2; Fails: 0; Errors: 0) (3.00 ms) - Chrome 11.0.696.57 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (3.00 ms) + Chrome 19.0.1084.36 Mac OS: Run 2 tests (Passed: 2; Fails: 0; Errors 0) (3.00 ms) Let's turn our attention to the end-to-end test. @@ -157,15 +153,14 @@ __`test/e2e/scenarios.js`:__ ... it('should be possible to control phone order via the drop down select box', function() { - - // narrow the dataset to make the test assertions shorter + //let's narrow the dataset to make the test assertions shorter input('query').enter('tablet'); expect(repeater('.phones li', 'Phone List').column('phone.name')). toEqual(["Motorola XOOM\u2122 with Wi-Fi", "MOTOROLA XOOM\u2122"]); - select('orderProp').option('alphabetical'); + select('orderProp').option('Alphabetical'); expect(repeater('.phones li', 'Phone List').column('phone.name')). toEqual(["MOTOROLA XOOM\u2122", @@ -183,12 +178,9 @@ Angular's server}. # Experiments -<div style="display:none"> -!!!!! TODO(i): we need to fix select/option to support unknown option !!!!! * In the `PhoneListCtrl` controller, remove the statement that sets the `orderProp` value and -you'll see that the ordering as well as the current selection in the dropdown menu will default to -"Alphabetical". -</div> +you'll see that Angular will temporarily add a new "unknown" option to the drop-down list and the +ordering will default to unordered/natural order. * Add an `{{orderProp}}` binding into the `index.html` template to display its current value as text. |