Home > Developer > Web Develop
First, data binding
1. Data binding: Data is transferred from a place a (passed) to another place B, and this operation is done by the framework
2. Bidirectional data binding: Data can flow from view (view layer) to model (i.e., data) or from model to view
View: That is our page (mainly andular directives and expressions)
Model: Scope object (currently $rootscope), which can contain properties or methods
When you change the data in the view, the corresponding properties of the Model object change: ng-model instruction data from View==>model
When the properties of the Model Field object change, the page corresponding data is updated: {{}} expression data from Model==>view
Ng-model is a two-way data binding, and {{}} is a one-way data binding, and an expression can only request data from memory, it cannot change data, so there is no data flowing from the page to memory.
The 3.ng-init is used to initialize the current scope variable. (One-way data binding, from page to angular memory, ng-init is defined in the body tag)
1 <!DOCTYPE HTML>2 <HTML>3 <HeadLang= "en">4 <MetaCharSet= "UTF-8">5 <title>02_ (bidirectional) data binding</title>6 </Head>7 <BodyNg-app=""Ng-init= "Username= ' Tom '">8 9 <inputtype= "text"Ng-model= "UserName" />Ten <P>Name: {{UserName}}</P> One <inputtype= "text"Ng-model= "UserName"/> A <P>Name: {{UserName}}</P> - - <Scripttype= "Text/javascript"src=".. /.. /js/angular-1.2.29/angular.js "></Script> the </Body> - </HTML>
The above code defines 2 input boxes and two P tags to display the content. First the body tag in the ng-app= "" and ng-init= "Username= ' Tom '" to remove, open the page, found that the name immediately after the expression, the expression is output to explain the JS syntax is problematic, and Angularjs also introduced, the problem is Because, this statement is not within the administrative area of the angular.
At this point, click Open Ng-inspector This plugin, what content is not
put ng-app= "" Plus, and then open the page, and open the Ng-inspector plugin, found that the name is no longer displayed as the expression, at the same time, the plug-in more than one $rootScope root scope object . ng-app= "" This command creates a scope object within its jurisdiction by default!! Notice that you click the arrow at the front of the scope object to turn it downward (that is, expand the contents) and find nothing.
The code is modified as follows: Add ng-model= "UserName" to the first input tag , and the expression contains UserName,
1 <!DOCTYPE HTML>2 <HTML>3 <HeadLang= "en">4 <MetaCharSet= "UTF-8">5 <title>02_ (bidirectional) data binding</title>6 </Head>7 <Bodyng-app= "">8 9 <inputtype= "text"ng-model= "UserName"/>Ten <P>Name:{{UserName}}</P> One <inputtype= "text" /> A <P>Name: {{}}</P> - - <Scripttype= "Text/javascript"src=".. /.. /js/angular-1.2.29/angular.js "></Script> the </Body> - </HTML>
The execution results are as follows: At this point, the first input tag and the first P tag all display the name, and the Ng-inspector plugin also has a username property, the value of which is Tom, the Usernname property in memory is Ng-model= "UserName" is specified, the value of this property is the input tag, and the page in the P-tag display where the value is? In fact , there is a relationship with Ng-model, {{}} is written in username, meaning is to the scope of angular in memory username this property to be displayed.
If the second input tag is ng-model= "XX", that is,
1 <inputtype= "text"Ng-model= "UserName" />2 <P>Name: {{UserName}}</P>3 <inputtype= "text"Ng-model= "XX"/>4 <P>Name: {{UserName}}</P>
After opening the page in two input boxes to enter the content, you can see the second input tag entry, you can see in the plug-in more than one name is the attribute of XX, and the second P-label shows the value of the Username property in memory. It is also explained that the variable name defined in the Ng-model, will be added to angular memory, the expression is written in the name of the variable, angular will go in memory to find if there is no property written in this expression, if there is, the value of this property is taken to show on the page, if not , not displayed. With Ng-model, data can flow from the page to angular memory, or from angular memory to the page. So Ng-model is a two-way data binding, and {{}} is a one-way data binding, which is used only to display data and data from angular memory
Finally, when you add ng-init = "Username= ' Tom" to the body, Tom is displayed in 2 input boxes and two display areas, and the angular memory in the plugin has a userName attribute with a value of Tom,
Note that the data displayed in the input box on the page is derived from the memory, and only the body inside the username is initialized;
Now the value of the first input box is modified, and the other three display values are changed, and the value of the property in angular's memory has changed.
Angular JS-3-Angular JS bidirectional data binding
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
