angular.js筛选器
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>