Angular.js review ng-app and ng-model usage tips

Angular.js review ng-app and ng-model usage tips_AngularJS

WBOY

Release： 2016-05-16 15:03:53

Original

1581 people have browsed it

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>

Copy after login

ng-app attribute is the flag statement of angular.js, which marks the scope of angular.js. ng-app can be added in many places, like the above added to the html tag, indicating that the angular script works on the entire page. You can also add the ng-app attribute locally. For example, adding ng-app within a certain div will indicate that the entire div area will be parsed using angular scripts, while other locations will not be parsed by angular scripts.
ng-model means building a data model. Here, in the input box for inputting the name, we define a yourname data model. Once the model is defined, we can call it below by leveraging {{}}. This completes the 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 situations.
1. Set filter to implement search function
In the following code, we use a simple data model definition + filter to complete a list search function. (This is an example code from the Chinese website, so you don’t need to worry about the unclear parts first)

<div class="container-fluid"> 
 <div class="row-fluid"> 
  <div class="span2"> 
   Search: <input ng-model="query"> 
  </div> 
  <div class="span10"> 
   <ul class="phones"> 
    <li ng-repeat="phone in phones | filter:query"> 
     {{phone.name}} 
    <p>{{phone.snippet}}</p> 
    </li> 
   </ul> 
    </div> 
 </div> 
</div>

Copy after login

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 to the query data model. In the following li, you can use filter:query to implement the data filtering function in the list and perform filtering based on the user's input information.
2. Set orderBy to implement list sorting function
In the following code, in the same way as filter, orderBy is used 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 class="phones"> 
 <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> 
  {{phone.name}} 
  <p>{{phone.snippet}}</p> 
 </li> 
</ul>

Copy after login

The above is about the usage skills of ng-app and ng-model. I hope you can gain something from it by reviewing the past and learning the new.