Simple structure of index.html in Angular.js:
<!doctype html> <html ng-app> <head> <script src="http://code.angularjs.org/angular-1.0.1.min.js"></script> </head> <body> Your name: <input type="text" ng-model="yourname" placeholder="World"> <hr> Hello {{yourname || 'World'}}! </body> </html>The ng-app property is a flag statement of angular.js, which marks the scope of angular.js. ng-app can be added in many places, as above, to the html tag, indicating that the angular script works for the entire page. You can also add ng-app attribute locally. For example, adding ng-app in a certain div, it means that the entire div area will be parsed using angular scripts, while angular scripts will not be parsed in other places.
ng-model means to build a data model. Here, in the input box of input name, we define a yourname data model. After defining the model, we can make calls below by using {{}}. This completes data binding. When we enter content in the input box, it will be synchronized to the Hello statement block below.
The data model defined by ng-model can not only be used in the above scenarios, but can also be widely used in many cases.
1. Set up filter to realize search function
In the following code, we can complete a list search function using a simple data model definition + filter. (This is the example code on the Chinese website, so don’t need to be unclear.)
<div> <div> <div> Search: <input ng-model="query"> </div> <div> <ul> <li ng-repeat="phone in phones | filter:query"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul> </div> </div> </div> </div>In the above code, the data model query is bound to the input tag of the search box. In this way, the information entered by the user will be synchronized into the query data model. In the following li, using filter:query can implement the data filtering function in the list and filter according to the user's input information.
2. Set orderBy to implement list sorting function
In the following code, like filter, use orderBy to add a sorting function to the list:
Search: <input ng-model="query"> Sort by: <select ng-model="orderProp"> <option value="name">Alphabetical</option> <option value="age">Newest</option> </select> <ul> <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul>The above is about the techniques of using ng-app and ng-model. We review the old and learn the new. I hope everyone can gain something from it.