chaojidan

导航

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

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

<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`）其过滤器的输入。

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

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

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

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过滤器的输入。

无论什么时候数据模型发生了改变（比如用户在下拉菜单中选了不同的选项），AngularJS的数据绑定会让视图自动更新。没有任何笨拙的DOM操作！

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操作，模板解析等操作，大大的减少了开发任务。

 

 

 

加油！

posted on 2015-01-19 18:10  chaojidan  阅读(1869)  评论(2)  编辑  收藏  举报