diff options
Diffstat (limited to 'docs/content/tutorial/step_03.ngdoc')
| -rw-r--r-- | docs/content/tutorial/step_03.ngdoc | 37 |
1 files changed, 19 insertions, 18 deletions
diff --git a/docs/content/tutorial/step_03.ngdoc b/docs/content/tutorial/step_03.ngdoc index fef4743f..3c997337 100644 --- a/docs/content/tutorial/step_03.ngdoc +++ b/docs/content/tutorial/step_03.ngdoc @@ -32,10 +32,10 @@ We made no changes to the controller. __`app/index.html`:__ <pre> ... - Fulltext Search: <input ng:model="query"/> + Fulltext Search: <input ng-model="query"> <ul class="phones"> - <li ng:repeat="phone in phones.$filter(query)"> + <li ng-repeat="phone in phones | filter(query)"> {{phone.name}} <p>{{phone.snippet}}</p> </li> @@ -43,8 +43,9 @@ __`app/index.html`:__ ... </pre> -We added a standard HTML `<input>` tag and used angular's {@link api/angular.module.ng.$filter.filter $filter} -function to process the input for the `ng:repeater`. +We added a standard HTML `<input>` tag and used angular's +{@link api/angular.module.ng.$filter.filter $filter} function to process the input for the +`ng-repeater`. This lets a user enter search criteria and immediately see the effects of their search on the phone list. This new code demonstrates the following: @@ -53,17 +54,17 @@ list. This new code demonstrates the following: name of the input box to a variable of the same name in the data model and keeps the two in sync. In this code, the data that a user types into the input box (named __`query`__) is immediately -available as a filter input in the list repeater (`phone in phones.$filter(`__`query`__`)`). When +available as a filter input in the list repeater (`phone in phones | filter(`__`query`__`)`). When changes to the data model cause the repeater's input to change, the repeater efficiently updates the DOM to reflect the current state of the model. - <img src="img/tutorial/tutorial_03_final.png"> + <img src="img/tutorial/tutorial_03.png"> -* Use of `$filter`. The {@link api/angular.module.ng.$filter.filter $filter} method uses the `query` value to -create a new array that contains only those records that match the `query`. +* Use of `filter` filter. The {@link api/angular.module.ng.$filter.filter filter} function uses the +`query` value to create a new array that contains only those records that match the `query`. - `ng:repeat` automatically updates the view in response to the changing number of phones returned -by the `$filter`. The process is completely transparent to the developer. + `ng-repeat` automatically updates the view in response to the changing number of phones returned +by the `filter` filter. The process is completely transparent to the developer. ## Test @@ -127,23 +128,23 @@ really is that easy to set up any functional, readable, end-to-end test. However, when you reload the page, you won't see the expected result. This is because the "query" model lives in the scope defined by the body element: - <body ng:controller="PhoneListCtrl"> + <body ng-controller="PhoneListCtrl"> If you want to bind to the query model from the `<title>` element, you must __move__ the -`ng:controller` declaration to the HTML element because it is the common parent of both the body +`ng-controller` declaration to the HTML element because it is the common parent of both the body and title elements: - <html ng:controller="PhoneListCtrl"> + <html ng-app ng-controller="PhoneListCtrl"> - Be sure to *remove* the `ng:controller` declaration from the body element. + Be sure to *remove* the `ng-controller` declaration from the body element. While using double curlies works fine in within the title element, you might have noticed that for a split second they are actually displayed to the user while the page is loading. A better -solution would be to use the {@link api/angular.directive.ng:bind ng:bind} or {@link -api/angular.directive.ng:bind-template ng:bind-template} directives, which are invisible to the -user while the page is loading: +solution would be to use the {@link api/angular.module.ng.$compileProvider.directive.ng-bind +ng-bind} or {@link api/angular.module.ng.$compileProvider.directive.ng-bind-template +ng-bind-template} directives, which are invisible to the user while the page is loading: - <title ng:bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title> + <title ng-bind-template="Google Phone Gallery: {{query}}">Google Phone Gallery</title> * Add the following end-to-end test into the `describe` block within `test/e2e/scenarios.js`: |