Angularjs A simple example of bidirectional data binding _angularjs

Angular two-way data binding, a personal understanding is that the model to build data models, then the data on the view will be stored in the angular program, the view of the data changes will be synchronized to the Model,model data changes will be synchronized to the view.

The following demo demo:

<! DOCTYPE html>
 
 

Run Result: After the program is run, enter text in the input box, and the following will change with the contents of the input box. Isn't it amazing! Before the need to write a large section of JS code (listening to the onchange event, the value of input to the following strong elements), now only a Ng-model command to complete. perferct!

Case Detailed:

1. The role of the Ng-model directive: to establish a data model in which a variable username is used to store the value of the INPUT element;

2. {{username}}} is an expression, angular automatically evaluates the expression and replaces it with the corresponding value.

3. Manual input text, INPUT element value change, automatically sync to model Usename variable, {{username}} is read username value from the model, so the content of the following strong element follows the change.

Synchronizing the data is angular to help us complete.

Thank you for reading, I hope to help you, thank you for your support for this site!