Home > Developer > Web Develop
Tag: operation will also be traditional and BSP view control ISP hold
Third, two-way data binding
Data binding is one of the features of Anguarjs and avoids writing large amounts of initial code to save development time
Let's imagine that model is a simple fact in your application.
Your model is the part you use to read or update. The data binding directive provides a way for your model to project to view. These projections can be seamless, without compromising the application to the Web application.
Traditionally, when model has changed. The developer needs to handle the DOM elements manually and reflect the attributes into those changes. This is a two-way process.
On the one hand, model changes drive the change of elements in the DOM,
On the other hand, changes in DOM elements can also affect model.
This is more complex in user interaction, as developers need to process and parse these interactions, then fuse into a model and update the view.
This is a manual and complex process, and when an application is very large, it can be a very laborious task.
There must be a better solution here! That's Angularjs's bidirectional data binding, which synchronizes the DOM and model, and so on.
This is the online Baidu knowledge theory, now, I am not too clear about the concept of the so-called MV, the following is my experience before writing JS:
Angularjs can bind a variable or the value of a property (Model) to a control on a page through the form of {{}}, without having to write JS on its own to manipulate the DOM, reducing the amount of code
(What does the update view refer to?) )
The following is an example of two-way binding:
1 <BodyNg-app="">2 <DIV>3 <Div>4 <label>Name:</label>5 <inputtype= "text"Ng-model= "Name"placeholder= "Please enter name"name="">6 </Div>7 <Div>8 <label>Greeting words:</label>9 <label>Hello,{{name}}</label>Ten </Div> One </DIV> A </Body>View Code
Native JS requires manipulation of the DOM:
1 <Body>2 <Div>3 <label>Name:</label>4 <inputtype= "text"ID= "Name"placeholder= "Please enter name"onkeyup= "NameChange ();"name="">5 </Div>6 <Div>7 <label>Greeting words:</label>8 <labelID= "Greeting"></label>9 </Div>Ten </Body> One <Scripttype= "Text/javascript"> A functionNameChange () - { - varname=document.getElementById ('name'). Value; the document.getElementById ('Greeting'). InnerText="Hello,"+name; - } - - </Script>View Code
Bidirectional binding of ANJULARJS series 3--data
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
