Home » HTML5 » A review of the Angular.js + study notes (1) [ng-a...

A review of the Angular.js + study notes (1) [ng-app and ng-model]

The simple structure of index.html in



Your, name:,

Hello {{yourname || ' World'}}!

ng-app property is a sign of the angular.js statement, it marked the scope of.Ng-app angular.js can be added in many places, like the one above is added to the HTML label, angular script works on the page. You can also add the ng-app attribute in the local, such as the addition of ng-app in a div, indicates that the entire div region the next angular script, and other places do not apply the angular script.

ng-model said the establishment of a data model. Here in the input and enter the name of the input box, we give the definition of a yourname data model. The model is defined, we can call in the following method is the use of {{}}. this completes the data binding, when we are in the input box enter the content.

, will be synchronized to the Hello block in the following
The data model defined by

ng-model not only can be used in the above scenes, but also can be widely used in many cases.

1, set filter, search function,

in the code below, we use a simple data model definition +filter can complete a list of search functions. (this is Chinese online code examples, first need not tube unclear part)


  • {{phone.name}}


in the above code, search for input label box query. data model, the user input information will be synchronized to the query data model. In the Li, you can use filter:query to realize the function of data filtering in the list, according to the input information of users filter filter.

2, set orderBy, to achieve list sorting function,

in the following code, the same as filter, using orderBy for the list to add a sorting function:

Sort by:

  • {{phone.name}}