[Angular Tutorial] 6-Two-way Data Binding

在这一步中，您将会添加一个新特性来使得您的用户可以控制电话列表中电话的顺序，动态改变顺序是由创建一个新的数据模型的特性实现的，将它和迭代器绑定在一起，并且让数据绑定神奇地处理下面的工作。

　　·除了搜索框，应用会展示一个下来菜单来允许用户控制电话列表的顺序。

最大的改变列举如下，当然您可以点击这里查看全部的不同。

组件模板

app/phone-list/phone-list.template.html:

<div class="container-fluid">
  <div class="row">
    <div class="col-md-2">
      <!--Sidebar content-->

      <p>
        Search:
        <input ng-model="$ctrl.query">
      </p>

      <p>
        Sort by:
        <select ng-model="$ctrl.orderProp">
          <option value="name">Alphabetical</option>
          <option value="age">Newest</option>
        </select>
      </p>

    </div>
    <div class="col-md-10">
      <!--Body content-->

      <ul class="phones">
        <li ng-repeat="phone in $ctrl.phones | filter:$ctrl.query | orderBy:$ctrl.orderProp">
          <span>{{phone.name}}</span>
          <p>{{phone.snippet}}</p>
        </li>
      </ul>

    </div>
  </div>
</div>

　　

我们在phone-list.template.html模板中做了如下更改：

　　·首先，我们添加了一个绑定到$ctrl.orderProp的<select>元素，以便我们的用户可以对两种提供的排序方式进行选择。

　　·随后我们在filter过滤器中加入一个orderBy过滤器来进一步处理进入迭代器的数据。orderBy是一个过滤器，它可以接受一个数组，并且将该数组重新排序并返回。

Angular在选择元素和$ctrl.orderProp数据模型间创建了双向数据绑定，$ctrl.orderProp被用作orderBy过滤器的输入。

正如我们在第5步中讨论的数据绑定和迭代器，无论何时，一旦数据模型改变（比如由于用户通过下拉框改变了排列顺序），Angular的数据绑定可以使视图层自动改变，不需要额外设置臃肿不堪的DOM操作代码。

组件控制器

app/phone-list/phone-list.components.js:

angular.
  module('phoneList').
  component('phoneList', {
    templateUrl: 'phone-list/phone-list.template.html',
    controller: function PhoneListController() {
      this.phones = [
        {
          name: 'Nexus S',
          snippet: 'Fast just got faster with Nexus S.',
          age: 1
        }, {
          name: 'Motorola XOOM™ with Wi-Fi',
          snippet: 'The Next, Next Generation tablet.',
          age: 2
        }, {
          name: 'MOTOROLA XOOM™',
          snippet: 'The Next, Next Generation tablet.',
          age: 3
        }
      ];

      this.orderProp = 'age';
    }
  });

　　·我们更改了phones的数据模型-电话的列表-来为每一部电话增加了一个age属性。这个属性可以通过机龄来对电话进行排序。

　　·我们在控制器中增加了一行代码来将orderProp的初始值设置为age。如果我们在这里没有设置初始值，orderBy过滤器将会保持未初始化的状态直到我们在下拉框中选中了一个选项。

现在是来谈一谈双向数据绑定的好时候了。注意到当应用被浏览器加载后，"Newest"已经被下拉菜单选择了。这是因为我们已经在控制器中将orderProp设置成了‘age’。所以绑定从我们的数据模型到UI起了效果，现在如果您在下拉框中选择“Alphabetically”，数据模型将被更新，电话记录也会被重新排序，这时候数据绑定从一个相反的方向完成它的工作-从UI到数据模型。

实验

在PhoneListCtrl控制器中，删除设置orderProp取值的那行代码，您将会看到Angular在下拉框的选项中临时增加了一个空白（“未知”）选项，而且电话的顺序是未处理过的（原生排序）。

添加一个phone-list.template.html模板中添加{{$ctrl.orderProp}}绑定来展示其当前值。

通过添加一个-来反转排序<option value="-age">Oldest</option>。

总结

现在您已经在应用中添加了排序，让我们进入下一步来学习Angular Service和Angular如何使用依赖注入（dependency injection）吧！