1-way, 2-way, 3-way, ... or more data binding in AngularJS?

Question

Roughly speaking, one-way data binding is simply associated with the ng-model inside the page and on both sides when the controllers are involved. Can someone explain this concept to me so that I really understand how to look at it? Also there is 3-way data binding and is there 4-way, 5-way?

Answer 1

(from JohnAndrews answer) 1-way data binding = your data model is inserted into your views / templates, usually from the controller, and changes in your model in the controller change the data in your views. 2-way data binding = same as above, but you can also make changes to your data model in the view.

3-way = your data is synchronized with the remote storage (loke CouchDB) 4-way = your data is synchronized with the local database (for example, localStorage or similar) and this database is synchronized with the remote storage

Source https://docs.google.com/presentation/d/1NByDXl6YL6BJ6nL0G2DLyZs5Og2njE_MNJv6vNK5aoo/edit#slide=id.g34d447b28_10

Answer 2

One-way data bindings : It's pretty simple. that models update views / templates.

Two-way data bindings : here the model fills the view, and any changes in the view are automatically reflected in the model, and vice versa. eg

 <input type="text" ng-model="name"/> <h1>Hello {{name}}!</h1> 

So, here the value of the input field is tied to the model, that is, the "name". Whenever a name changes, it is immediately updated on the page.

think about the image, b'use can not post it: (

Model <===> DOM

trilateral data binding :

Firebase <=====> Model <=====> DOM

here, a firebase such as a database server can only update the model, not the ieUI DOM. The model can update the db server, i.e. firebase and DOM, both. therefore, the model holds power to update the interface and db server :) The model can populate the DOM, i.e. The interface is the other way around.

Answer 3

1-way data binding = your data model is inserted into your views / templates, usually from the controller, and changes in your model in the controller change the data in your views. But not the other way around.

2-way data binding = same as above, but you can also make changes to your data model in the view. For example, if you have $ scope.title in your controller and you bind it to <input ng-model = "title"> , any change in $ scope.title in the controller changes whats in the input and any change to the input value also modifies the variable $ scope.title = 2-way binding.

Answer 4

For a short answer -

Method 1 means that the values ​​in HTML (ng-model / {{}}) are replaced by the value in the scope variable.

Values

2 way and placeholder / html (ng-model / {{}}) are always equal to each other

3 ways Involving a server in two-way synchronization when data is being synchronized with a server or database.

//It's a lot...