angularjs中的filter(过滤器)

Posted 2020-06-13

源文地址：http://www.ncloud.hk/技术分享/angularjs中的filter-过滤器/

filters可以用来格式化数据。例如把时间格式化成为yyyy-MM-dd的形式来呈现给用户，方便查看。angularjs内置了一些filters，我们也可以根据自己的需要自定义一些filters.

下面是angularjs提供的filters：

currency:格式化一个数字成为一种货币。当没有提供任何货币符号时，使用当前区域的默认符号。

number:格式化数字成为文本

filter:从数组中选择一个子集,并将其返回为一个新数组

date：基于要求的格式格式化日期为字符串

json：允许你将一个javascript对象转化为JSON字符串

lowercase：转换字符串成为小写

uppercase：转换字符串成为大写

limitTo：将数组/字符串限定为一个指定的元素/字符数。

orderBy:通过给定的表达式指定数组，它是按字母顺序排列的字符串和数值。

用法介绍：

html中用法：

filter可以用管道符 | 添加到表达式:{{expression | filter}}

也可以多个filter连用，上一个filter的输出作为下一个filter的输出：

{{expression | filter1 | filter2 |……}}

还可以在指令中用参数：

例如: <li ng-repeat=“x in names | orderBy:’country’”>

或<li ng-repeat=“x in names | filter : ‘i’>

javascript中用法：

例：$scope.formatDate = $filter(‘date‘)(today, ‘yyyy-MM-dd‘);

有时候angularjs内置的filter不够用，我们就可以自己定义一个过滤器。

例如定义一个名为“myFormat”的过滤器，

<ul ng-app="myApp"ng-controller="namesCtrl">

<li ng-repeat="x in names">

{{x | myFormat}}

</li>

</ul>

<script>

var app = angular.module(‘myApp‘, []);

app.filter(‘myFormat‘, function() {

returnfunction(x) {

var i, c, txt = "";

x = x.split("")

for (i = 0; i < x.length; i++) {

c = x[i];

if (i % 2 == 0) {

c = c.toUpperCase();

}

txt += c;

}

return txt;

};

});

app.controller(‘namesCtrl‘, function($scope) {

$scope.names = [‘Jani‘, ‘Carl‘, ‘Margareth‘, ‘Hege‘, ‘Joe‘, ‘Gustav‘, ‘Birgit‘,‘Mary‘, ‘Kai‘];

});

</script>

这个myFormat过滤器将会格式化其它奇数位的字符为大写。