CODEWITHSUNDEEP
javascriptangularjs
maulik13
maulik13

Reputation: 3760

Understanding two-way data binding tutorial in AngularJS official site

I am looking at the official tutorial on AngularJS website that explains two-way data binding.

https://docs.angularjs.org/tutorial/step_04

The tutorial mentions this:

Angular creates a two way data-binding between the select element and the orderProp model. orderProp is then used as the input for the orderBy filter.

However, when looking at the live demo I only see one-way binding.

Can anybody explain how that demo is supposed to illustrate two-way data binding?

Upvotes: 0

Views: 147

Answers (3)

Juned Lanja
Juned Lanja

Reputation: 1484

//ng-model="query" is two way data binding of input to model property query
// any change in model will reflect inside input textbox and vice versa 
Search: <input ng-model="query">

//ng-model="orderProp" will assign selected option to model property orderProp
Sort by:
<select ng-model="orderProp">
  <option value="name">Alphabetical</option>
  <option value="age">Newest</option>
</select>


<ul class="phones">
  //filter:query will filter phones having its property matching words to query and result will be ordered by orderProp that is by name or age 
  <li ng-repeat="phone in phones | filter:query | orderBy:orderProp">
    <span>{{phone.name}}</span>
    <p>{{phone.snippet}}</p>
  </li>
</ul>

Upvotes: 0

MarcoS
MarcoS

Reputation: 17721

Well, what you see is the binding from the view to the model (you write something in the input box and the view changes).

The other way round binding (from the model to the view) is the 'standard' javascript binding: you set a value in a scope variable (linked by Angular to a DOM element), and the view reflects it...

I agree with @Sergio Tulentsev it's not so obvious... :-)

Upvotes: 0

Sergio Tulentsev
Sergio Tulentsev

Reputation: 230481

The tutorial has this explanation (emphasis mine):

This is a good time to talk about two-way data-binding. Notice that when the app is loaded in the browser, "Newest" is selected in the drop down menu. This is because we set orderProp to 'age' in the controller. So the binding works in the direction from our model to the UI. Now if you select "Alphabetically" in the drop down menu, the model will be updated as well and the phones will be reordered. That is the data-binding doing its job in the opposite direction — from the UI to the model.

So this is the demonstration of two-way binding. Although not very obvious.

Upvotes: 1

Related Questions