在Angular中,可以用过滤器来声明应该如何变换数据格式,然后再显示给用户,你只要在模板中使用一个插值变量即可。使用过滤器的语法是:
{{ expression | filterName : parameter1 : ...parameterN }}
这里的表达式可以是任意的Angular表达式,fileName是你需要使用的过滤器名称,过滤器的多个参数之间使用冒号分隔。这些参数自身也可以是任何合法的Angular表达式。
Angular内置了很多过滤器,例如:
{{12.9 | currency}
以上这段代码将会显示如下结果:
$12.90
把插值变量声明在视图里面(而不是在控制器或者模型里面),因为数字前面的美元符号对人类来说很重要,而对我们用来处理数据的逻辑来说是没有意义的。
Angular内置的其他过滤器还有date、number、uppercase等。
在绑定的过程中,可以用管道符号把过滤器连接起来。例如,对于上面的这个例子,我们可以加一个number过滤器来把小数点后面的数值格式化掉,number过滤器会把数值作为参数传递给round函数。所以:
{{12.9 | currency | number:0}}
将会显示成:
$13
在实际开发过程中,不必受限于内置的过滤器,自已编写过滤器也非常简单。例如,为标题文字创建首字母大写的字符串,可以像下面这样开发Filter:
<html>
<head>
<title>Filter实例</title>
</head>
<body ng-app='HomeModule' ng-controller='HomeController'>
<h1>{{pageHeading | titleCase}}</h1>
<script src="lib/angular/angular.js"></script>
<script>
var myApp=angular.module('HomeModule',[]);
myApp.controller('HomeController', function($scope) {
$scope.pageHeading = 'behold the majesty of your page title';
});
myApp.filter('titleCase', function() {
var titleCaseFilter = function(input) {
var words = input.split(' ');
for(var i=0;i<words.length;i++) {
words[i] = words[i].charAt(0).toUpperCase() + words[i].slice(1);
}
return words.join(' ');
};
return titleCaseFilter;
});
</script>
</body>
</html>
运行效果:
资料来源:《用AngularJS开发下一代Web应用》