AngularJS入门讲解2：过滤器和双向绑定

时间 2019-11-15

标签 angularjs 入门讲解过滤器双向绑定栏目 AngularJS 繁體版

原文原文链接

咱们在上一课作了不少基础性的训练，接下来，咱们讲一些难点的知识点，首先，讲一下如何实现一个全文检索功能：html

<html ng-app>
<head>
  ...
  <script src="lib/angular/angular.js"></script>
  <script>
　　function PhoneListCtrl($scope) {
  　　　　$scope.phones = [
    　　　　{"name": "Nexus S","snippet": "Fast just got faster with Nexus S."},
    　　　　{"name": "Motorola XOOM™ with Wi-Fi","snippet": "The Next, Next Generation tablet."},
    　　　　{"name": "MOTOROLA XOOM™", "snippet": "The Next, Next Generation tablet."}
  　　　 ];
　　}
　</script>
</head>
<body ng-controller="PhoneListCtrl">

  <div class="container-fluid">
  　　<div class="row-fluid">
    　　<div class="span2">

      　　Search: <input ng-model="query">

    　　</div>
    　　<div class="span10">

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

       </div>
  　　</div>
　　</div>
</body>
</html>

上面这个代码的功能：容许用户输入一个搜索条件，马上就能看到电话列表中的搜索结果。数组

当页面加载后，AngularJS会根据输入框中的值，将其与数据模型中相同名字的变量（$scope.query）绑定在一块儿，以确保二者的同步性。浏览器

在这段代码中，用户在输入框中输入的值称做query，会马上做为列表迭代器（phone in phones | filter:query`）其过滤器的输入。app

使用filter过滤器：filter函数使用query的值来建立一个只包含匹配query记录的新数组。函数

ngRepeat会根据filter过滤器生成的手机记录数据数组来自动更新视图。整个过程对于开发者来讲都是透明的。ui

接下来，咱们将在上面的例子中添加一个新的功能：增长一个让用户控制手机列表显示顺序的功能spa

Search: <input ng-model="query"> Sort by: <select ng-model="orderProp"> <option value="name">Alphabetical</option> <option value="age">Newest</option> </select> <ul class="phones"> <li ng-repeat="phone in phones | filter:query | orderBy:orderProp"> {{phone.name}} <p>{{phone.snippet}}</p> </li> </ul>

咱们在html中作了以下更改：双向绑定

首先，咱们增长了一个叫作orderProp的<select>标签，这样咱们的用户就能够选择咱们提供的两种排序方法。

而后，在filter过滤器后面添加一个orderBy过滤器用其来处理进入迭代器的数据。orderBy过滤器以一个数组做为输入，复制一份副本，而后把副本重排序再输出到迭代器。

AngularJS在select元素和orderProp模型之间建立了一个双向绑定。并且orderProp会被用做orderBy过滤器的输入。code

不管何时数据模型发生了改变（好比用户在下拉菜单中选了不一样的选项），AngularJS的数据绑定会让视图自动更新。没有任何笨拙的DOM操做！htm

function PhoneListCtrl($scope) { $scope.phones = [ {"name": "Nexus S", "snippet": "Fast just got faster with Nexus S.", "age": 0}, {"name": "Motorola XOOM™ with Wi-Fi", "snippet": "The Next, Next Generation tablet.", "age": 1}, {"name": "MOTOROLA XOOM™", "snippet": "The Next, Next Generation tablet.", "age": 2} ]; $scope.orderProp = 'age'; }

咱们修改了phones模型—— 手机列表的数组 ——为每个手机记录增长了一个age属性。咱们会根据age属性来对手机列表进行排序。
咱们在控制器代码里加了一行orderProp的默认值为age。若是咱们不设置默认值，这个模型会在咱们的用户在下拉菜单选择一个顺序以前一直处于未初始化状态。

当应用在浏览器中加载时，“Newest”在下拉菜单中被选中。这是由于咱们在控制器中咱们把orderProp设置成了‘age’。因此绑定，从模型到用户界面的方向上起了做用——即数据从模型到视图的绑定。如今当你在下拉菜单中选择“Alphabetically”，数据模型会被同时更新，而且手机列表数组会被从新排序。这个时候数据绑定从另外一个方向产生了做用——即数据从视图到模型的绑定。

最后，经过一幅图来看一下这个例子的M和V是如何分离的：

看了这个例子，你们是否以为使用angular进行开发，是否是很方便啊。它封装了事件绑定，DOM操做，模板解析等操做，大大的减小了开发任务。

加油！