创建过滤器
写一个你自己的过滤器非常容易:在你的模块中注册一个新的过滤器(可注入的)工厂函数就行了。这个工厂函数必须放回一个新的过滤器函数,这个过滤函数的第一个参数接受的是输入。任何过滤器参数都会被当成附加的参数传递给过滤器。
下面的例子展示了逆转字符串文本。另外,它有条件地将文本大写并填上颜色。formatDate
index.html:
<!doctype html>
<html ng-app="MyReverseModule">
<head>
<script src="http://code.angularjs.org/angular-1.0.2.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div ng-controller="Ctrl">
<input ng-model="greeting" type="greeting"><br>
No filter: {{greeting}}<br>
Reverse: {{greeting|reverse}}<br>
Reverse + uppercase: {{greeting|reverse:true}}<br>
</div>
</body>
</html>
script.js:
angular.module('MyReverseModule', []).
filter('reverse', function() {
return function(input, uppercase) {
var out = "";
for (var i = 0; i < input.length; i++) {
out = input.charAt(i) + out;
}
// conditional based on optional argument
if (uppercase) {
out = out.toUpperCase();
}
return out;
}
});
function Ctrl($scope) {
$scope.greeting = 'hello';
}
End to end test:
it('should reverse greeting', function() {
expect(binding('greeting|reverse')).toEqual('olleh');
input('greeting').enter('ABC');
expect(binding('greeting|reverse')).toEqual('CBA');
});
Demo
相关主题
- 理解AngularJS过滤器
- AngularJS HTML编译器
相关API
- Angular Filter API
使用过滤器
过滤器可用在任何api或者ng.$rootScoe.Scope的执行过程中,不过一般用来格式化绑定在模板中的表达式。
{{ expression | filter }}
过滤器一般在处理过程中将数据转变成新的格式。它能使用链式风格,还能接受附加参数。
你可以像下面这样使用链式风格:
{{ expression | filter1 | filter2 }}
你也可以使用“:”来传递额外的参数给过滤器,比如,将数字123格式化成带有2为小数的形式:
123 | number:2
下面有些例子,展示了使用不同过滤器格式化之前和之后的样子:formatDate
- 无过滤器: {{1234.5678}} => 1234.5678
- 数字过滤器: {{1234.5678|number}} => 1,234.57. 注意“,”号和四舍五入后的后两位。
- 带参数的过滤器: {{1234.5678|number:5}} => 1,234.56780. 过滤器可以接受额外的参数,参数写在“:”的后面。比如,
number
过滤器接受数值型参数来制定需要展示几位小数。
相关主题
- 理解AngularJS过滤器
- 创建AngularJS过滤器
相关API
- Angular Filter API