AngularJS two-way Data Binding details simple examples, angularjs details

AngularJS two-way Data Binding details simple examples, angularjs details

Angular's two-way data binding, in my personal understanding, is to create a data model through the model, then the data on the view will be stored in the angular program, the data changes on the view will be synchronized to the model, the data changes of the model are also synchronized to the view.

The following demo:

<! DOCTYPE html> 
Running result: after the program is running, Enter text in the input box. The text in the text box will change in sync with the content in the input box. Not surprising! I used to write a large js Code (Listening to the onchange event and assigning the input value to the following strong element). Now I only use one ng-model command. Perferct!

Case Details:
1. The function of the ng-model command: to create a data model, there is a variable username in the model used to store the value of the input element;
2. {username} is an expression. angular automatically calculates the expression and replaces it with the corresponding value.
3. manually input text. The value of the input element changes and is automatically synchronized to the usename variable of the model. {username} is the value of username read from the model, therefore, the content of the strong element changes.
Angular helped us synchronize data.
Thank you for reading this article. I hope it will help you. Thank you for your support for this site!