AngularJS中的过滤器（filter）
AngularJS中的过滤器是用于对数据的格式化，或者筛选的函数，可以直接通过以下语法使用：
{{expression|filter}}
{{expression|filter1|filter2}}
{{expression|filter1:param1,param2,...|filter2}
过滤器的种类有number，currency，date，json，limitTo，lowercase，uppercase，filter，orderBy。
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
</head>
<body ng-app="app">
<div ng-controller="Controller1">
<p>{{1234567890 | number}}</p>
<!--显示1,234,567,890-->
<p>{{1234.56789 | number:3}}</p>
<!--显示1,234.568，保留3位小数-->
<p>{{1234.56789 | currency}}</p>
<!--显示$1,234.57，货币，默认的前缀是美元符号-->
<p>{{1234.56789 | currency:'￥'}}</p>
<!--显示￥1,234.57-->
<p>{{today | date:'medium'}}</p>
<!--显示Jun 28, 2015 3:45:54 PM-->
<p>{{today | date:'short'}}</p>
<!--显示6/28/15 3:45 PM-->
<p>{{today | date:'fullDate'}}</p>
<!--显示Sunday, June 28, 2015-->
<p>{{today | date:'longDate'}}</p>
<!--显示June 28, 2015-->
<p>{{today | date:'shortDate'}}</p>
<!--显示6/28/15-->
<p>{{today | date:'shortTime'}}</p>
<!--显示3:45 PM-->
<p>{{today | date:'mediumTime'}}</p>
<!--显示3:45:54 PM-->
<p>{{today | date:'yyyy-MM-dd HH:mm:ss'}}</p>
<!--显示2015-06-28 15:45:54-->
<p>{{['a','b','c','d','e'] | limitTo:3}}</p>
<!--显示["a","b","c"]，截取前3位-->
<p>{{['a','b','c','d','e'] | limitTo:-3}}</p>
<!--显示["c","d","e"]，截取后3位-->
<p>{{'Hello World' | lowercase}}</p>
<!--显示hello world-->
<p>{{'Hello World' | uppercase}}</p>
<!--显示HELLO WORLD-->
<p>{{data.phone | filter:'le'}}</p>
<!--显示[{"name":"iPhone","company":"Apple"}]，只匹配value值-->
<p>{{data.phone | filter:{company:'A'} }}</p>
<!--显示[{"name":"iPhone","company":"Apple"},{"name":"HUAWEI P8","company":"HUAWEI"}]，company中有A就会匹配到-->
<p>{{data.phone | orderBy:'name'}}</p>
<!--显示[{"name":"Galaxy S5","company":"Sumsung"},{"name":"HUAWEI P8","company":"HUAWEI"},{"name":"iPhone","company":"Apple"}]，以name的值做排序，默认是从小到大排序-->
<p>{{data.phone | orderBy:-'name'}}</p>
<!--显示[{"name":"iPhone","company":"Apple"},{"name":"Galaxy S5","company":"Sumsung"},{"name":"HUAWEI P8","company":"HUAWEI"}]，反序-->
<p>{{[2,24,13,89,3,8,41,9,10] | filter:checkNum}}</p>
<!--自定义的过滤器，显示[2,3,8,9,10]，定义见90~95行-->
</div>
<script src="../JS/angular.min.js"></script>
<script type="text/javascript">
angular.module('app', [])
.controller('Controller1', function($scope, $filter) {
$scope.today = new Date;
$scope.data = {
phone: [{
name: 'iPhone',
company: 'Apple'
}, {
name: 'Galaxy S5',
company: 'Sumsung'
}, {
name: 'HUAWEI P8',
company: 'HUAWEI'
}]
};
var jsonString = $filter('json')($scope.data);
console.log(jsonString);
/* console输出json格式的data
{
"phone": [
{
"name": "iPhone",
"company": "Apple"
},
{
"name": "Galaxy S5",
"company": "Sumsung"
},
{
"name": "HUAWEI P8",
"company": "HUAWEI"
}
]
}
*/
//自定义过滤器
$scope.checkNum = function(num) {
//>10的不保留
if (num > 10) return false;
else return true;
}
});
</script>
</body>
</html>
除了上面自定义过滤器的方法外，还有两种专门的方法。
第一种 module.filter(name,filterFactory)
第二种 @$filterProvider.register();
第一种的例子
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
</head>
<body ng-app="app">
<div ng-controller="Controller1">
<ul>
<!-- 循环输出data里面的数据，用自定义的名为filterAge的过滤器过滤 -->
<li ng-repeat="item in data | filterAge">
{{item.name}} {{item.age}} {{item.position}}
</li>
</ul>
</div>
<script src="../JS/angular.min.js"></script>
<script type="text/javascript">
angular.module('app', [], function($provide) {
//service提供数据
$provide.service('data', function() {
return [{
name: 'Wilshere',
age: 23,
position: 'midfield'
}, {
name: 'Giroud',
age: 28,
position: 'striker'
}, {
name: 'Cech',
age: 33,
position: 'goalkeeper'
}];
});
})
//用.filter的方法定义过滤器
.filter('filterAge', function() {
return function(obj) {
//obj是过滤前的对象
var newObj = [];
angular.forEach(obj, function(i) {
if (i.age > 25) {
newObj.push(i);
}
});
return newObj;
}
})
.controller('Controller1', function($scope, data) {
$scope.data = data;
});
</script>
</body>
</html>
第二种的例子
<!DOCTYPE html>
<html ng-app="app">
<head>
<meta charset="utf-8">
</head>
<body ng-app="app">
<div ng-controller="Controller1">
<ul>
<!-- 循环输出data里面的数据，用自定义的名为filterAge的过滤器过滤 -->
<li ng-repeat="item in data | filterAge">
{{item.name}} {{item.age}} {{item.position}}
</li>
</ul>
</div>
<script src="../JS/angular.min.js"></script>
<script type="text/javascript">
angular.module('app', [], function($filterProvider, $provide) {
//用注册的方法自定义过滤器
$filterProvider.register('filterAge', function() {
return function(obj) {
var newObj = [];
angular.forEach(obj, function(i) {
//age大于25的才会输出
if (i.age > 25) {
newObj.push(i);
}
});
return newObj;
}
});
//service提供数据
$provide.service('data', function() {
return [{
name: 'Wilshere',
age: 23,
position: 'midfield'
}, {
name: 'Giroud',
age: 28,
position: 'striker'
}, {
name: 'Cech',
age: 33,
position: 'goalkeeper'
}];
});
})
.controller('Controller1', function($scope, data) {
$scope.data = data;
});
</script>
</body>
</html>
