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

Question

Roughly speaking, 1-way data binding is simply binding with ng-model within the page and 2-way when controllers are involved. Can someone explain this concept to me so I really understand how to look at it? Also what is 3-way data binding and is there also 4-way, 5-way?

Answer 1

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

3-way = your data is in sync with a remote storage (loke CouchDB) 4-way = your data is in sync with a local database (like localStorage or similar) and that database is in sync with a 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's model update views/templates.

Two way data bindings: here model populate the view and any changes in the view are automatically reflected in the model, and vice versa. for example

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

So here, the value of the input field is bound to a model i.e. ‘name’. Whenever ‘name’ changes, it is updated immediately on the page.

think of image, b'use cant post it :(

Model <===> DOM

Three-Way Data Binding:

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

here, firebase like database server can update only model not the DOM i.e.UI. The Model can update db server i.e. firebase and DOM both. so model hold the power to update UI and db server :) The model can populate DOM i.e. UI vice versa.

Answer 3

1-way data binding = your data model gets inserted into your views / templates usually from a controller and changes to your model in the controller change the data in your views. But not the other way round.

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