了解AngularJS官方网站中的双向数据绑定教程

Question

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?

Answer 1

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.

Answer 2

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... :-)

Answer 3

//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>