您的位置：首页 > Web前端 > AngularJS

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

2015-01-19 18:10 513 查看

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

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

加油！

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航