第一种:通过表达式进行过滤
过滤器可以通过一个管道字符(|)和一个过滤器添加到表达式中。
1、uppercase 过滤器将字符串格式化为大写:
2、lowercase过滤器将字符串格式化为小写:
1 | {{name|lowercase|uppercase}} |
|
3、currency 过滤器将数字格式化为货币格式:
1 | {{price|currency: '$' :1}} |
|
参数$和1是可选的,第一个参数是自定义字符,第二个参数表示保留的小数位数。
4、orderBy 过滤器根据表达式排列数组:
1 | {{user | orderBy : 'age' : true }} |
2 | <!-- true 表示倒序, false 表示升序,默认是升序--> |
|
age是排序条件。
5、limitTo过滤器可以截取字符串:
2 | <!--第一个参数是截取的字符数,第二个参数是从第几位开始截取--> |
|
6、filter 过滤器从数组中选择一个子集:
1 | {{user | filter : '张三' : true }} |
|
第二个参数true是可选的,表示完全匹配,如果不加第二个参数,说明是模糊匹配。
第二种:通过控制器进行过滤。
JavaScript部分:
1 | var m = angular.module( 'app' , []); |
2 | m.controller( 'ctrl' , [ '$scope' , '$filter' , function ($scope, $filter){ |
3 | $scope.time = new Date().getTime(); |
4 | $scope.date = function (){ |
5 | $scope.time = $filter( 'date' )($scope.time, 'yyyy:mm:dd hh:mm:ss' ); |
|
html部分:
2 | <button ng-click= "date()" >标准时间</button> |
|
通过控制器进行数据过滤,在控制器中加入了新的参数$filter,就是依赖注入。
下面来看一个实例:将用户数据根据年龄或点击数进行升序或降序排序:
04 | <meta charset= "UTF-8" > |
06 | <style type = "text/css" > |
07 | .ng-cloak{display:none;} |
08 | td{height:30px;line-height:30px;padding:0px 10px;text-align:center;} |
11 | <body ng-app= "app" ng-controller= "ctrl" ng-cloak class= "ng-cloak" > |
12 | <table cellpadding= "0" cellspacing= "0" border= "1" > |
16 | <td ng-click= "orderBy('age')" >年龄</td> |
18 | <td ng-click= "orderBy('click')" >点击</td> |
22 | < tr ng-repeat= "v in data" > |
32 | <script type = "text/javascript" src= "../js/angular.min.js" ></script> |
33 | <script type = "text/javascript" > |
34 | var m = angular.module( 'app' , []); |
35 | m.controller( 'ctrl' , [ '$scope' , '$filter' , function ($scope, $filter){ |
37 | {user: '张三' , age:23, sex: '男' , click:100}, |
38 | {user: '李四' , age:26, sex: '女' , click:200}, |
39 | {user: '王五' , age:24, sex: '男' , click:300}, |
41 | $scope.orderBy = function (field){ |
42 | if (arguments.callee.mark== 'undefined' ){ |
43 | arguments.callee.mark = false ; |
45 | arguments.callee.mark = !arguments.callee.mark; |
46 | $scope.data = $filter( 'orderBy' )($scope.data, field, arguments.callee.mark); |
|
对于上述代码中的arguments有疑问的童鞋,可参考:《详解Javascript中arguments对象的的意义与用法》。