使用 Filter过滤器（filter）正如其名，作用就是接收一个输入，通过某个规则进行处理，然后返回处理后的结果。主要用在数据的格式化上，例如获取一个数组中的子集，对数组中的元素进行排序等。ng 内置了一些过滤器，它们是：currency(货币)、date(日期)、filter(子串匹配)、json(格式化 json 对象)、limitTo(限制个数)、lowercase(小写)、uppercase(大写)、number(数字)、orderBy(排序)。总共九种。下面例子是一个自定义的 filter。
清单 5. 使用 Filter
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
| index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="MyFirstCtrl">
<input type="text" ng-model="data.message">
<h1>{{data.message}}</h1>
</div>
<div ng-controller="MySecondCtrl">
<input type="text" ng-model="data.message">
<h1>{{data.message|reverse}}</h1>
</div>
</div>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.js
var myApp = angular.module('myApp', []);
myApp.factory('Data', function() {
return {message: "I'm data from a service"}
})
myApp.filter('reverse', function(Data) {
return function(text) {
return text.split("").reverse().join("") + Data.message;
}
})
function FirstCtrl($scope, Data){
$scope.data = Data;
}
function SecondCtrl($scope, Data){
$scope.data = Data;
}
}
|
在 main.js 中加入对 filter 的定义，我们定义了一个名为"reverse"的 filter，它的功能是把字符反转然后再加上从上一个清单中讲的 service 中得到的字符串。
我们对 MySecondCtrl 中的文字应用了"reverse"这个 filter，<h1>{{data.message|reverse}}</h1>, 所以在第二个 div 中的文字有了图中所示的效果。
图 2.运行结果 ng-repeat 指令属性ng-repeat：在处理一组数据的时候，经常需要把同一个 UI 重复很多次，AngularJS 提供了 ng-repeat 属性来帮助您解决这个问题。
ng-repeat 指令遍历一个数据集合中的每个数据元素，加载 HTML 模版把数据渲染出来。被重复使用的模版元素，就是我们绑定了这个指令属性的 DOM 元素。每一个使用模版渲染的 DOM 元素都有自己的 scope。请看下面这个例子：
清单 6. 使用 ng-repeat1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
| index.html
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div ng-app="myApp">
<div ng-controller="SecondCtrl">
<ul>
<li ng-repeat="person in roommates" </li>
</ul>
</div>
</div>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
main.js
var myApp = angular.module('myApp', []);
myApp.controller('SecondCtrl', function ($scope){
$scope.isRed = true;
$scope.isGreen = false;
$scope.roommates = [
{ name: 'Lucy'},
{ name: 'Lily'},
{ name: 'Sean'},
{ name: 'Adam'}
];
});
|
在 HTML 中的 ul 标签上设置 ng-repeat 属性，并用"person in roomates"指明集合并做遍历，就可以加载 HTML 模板把集合中的元素都轻松渲染出来。结果如下：
图 3. 运行结果 ng-class 指令属性ng-class 可以用来标记某个 class 是否被应用，通常用来处理是否加载某个 css 样式。请看下面这个例子。
更换之前例子中代码的 HTML Body 部分如下：在 HTML 中将每个 li 都设置上 ng-class 属性，且 ng-class="{'black':isBlack,'red':isRed}"，意思是当 isBlack 的值为 true 时，加载 black class，相反 isBlack 的值为 false，不加载 black class。
清单 7. 使用 ng-class 例子的 HTML 和 CSS 部分1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| index.html
<!DOCTYPE html>
<html>
<head>
<title>AngularJS Tutorials</title>
<link rel="stylesheet" type="text/css" href="Style.css" >
</head>
<body>
<div ng-app="myApp">
<div ng-controller="SecondCtrl">
<ul>
<li ng-repeat="person in roommates" ng-class="{'black':isBlack,'red':isRed}">{{person.name}}</li>
</ul>
<button ng-click="changeColor()">Click Here</button>
</div>
</div>
<script type="text/javascript"
src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.3/angular.min.js"></script>
<script type="text/javascript" src="main.js"></script>
</body>
</html>
Style.css
.red {
color: red;
}
.black {
color: black;
}
|
isBlack 的值为 true 还是 false，是在 JavaScript 里面决定的。如下所示，我们在初始化时给一个默认值，就是 isBlack 为 true，而 isRed 为 false。当点击了 button 之后触发 changeColor 函数，把 isBlack 的值设为！isBlack, 这样在每次点击 button 后 isBlack 的值都会发生改变，从而 html 上<li>的样式也跟着改变。
清单 8. 使用 ng-class 例子的 JS 部分1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
| main.js
var myApp = angular.module('myApp', []);
myApp.controller('SecondCtrl', function ($scope){
$scope.isBlack = true;
$scope.isRed = false;
$scope.roommates = [
{ name: 'Lucy'},
{ name: 'Lily'},
{ name: 'Sean'},
{ name: 'Adam'}
];
$scope.changeColor = function () {
$scope.isRed = !$scope.isRed;
$scope.isBlack = !$scope.isBlack;
}
});
|
|
