angular.js提供了丰富的内置筛选器:
1.currency[:symbol],依据指定的symbol将数值格式化为货币。
2.filter:exp:compare,使用exp参数值对表达式进行宽松或严格筛选比较。compare通常为布尔值或返回布尔值的表达式,为true时将进行严格比较(===),为false时只检查期望值是否为真实值的子集(通常用作页面值搜索)
3.json,将js对象格式化为JSON字符串,不支持的属性将被忽略。
4.limitTo:limit,限制个数。
5.lowercase/uppercase,大小写转换。
6.number[:faction],将数字格式化为文本,指定faction参数时小数部分的位数将被限制。
7.orderBy:exp:reverse,根据exp参数进行排序,reverse为true时降序,false(默认)时升序。
8.date[:format],将js的日期对象进行格式化输出字符串。
以下示例展示了filter和orderBy筛选器的基本用法:
<!DOCTYPE HTML>
<html ng-app='myApp'>
<head>
<meta charset='utf-8'>
<title>7</title>
<style type="text/css">
table{
text-align: right;
}
td,th{
padding: 3px;
}
th{
cursor: pointer;
}
</style>
</head>
<body>
<div ng-controller='controllerA'>
<h2>Sorting and ordering</h2>
<input type='text' ng-model='filterString'>
<table>
<tr>
<th>Title</th>
<th>Url</th>
<th>Stars</th>
</tr>
<tr ng-repeat="x in resources | filter:filterString | orderBy:'stars':true">
<td>{{x.title}}</td>
<td>{{x.url}}</td>
<td>{{x.stars}}</td>
</tr>
</table>
</div>
<script src='http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js'></script>
<script>
var app = angular.module('myApp',[]);
app.controller('controllerA',function($scope){
$scope.resources = [
{title:'JQuery',stars:200,url:'http://jquery.com'},
{title:'Bootstrap',stars:300,url:'http://bootstrap.com'},
{title:'Dojo',stars:90,url:'http://dojo.com'},
{title:'Angular.js',stars:260,url:'http://angular.js.com'}
]
})
</script>
</body>
</html>