简话Angular 04 Angular过滤器详解

一句话: filter是万能的数据处理器,可以过滤数据,排序数据,删除数据,扩展数据

1. 内置filter大全

url: https://docs.angularjs.org/api/ng/filter

2. 实例

  1 <div ng-controller="ExampleController">
  2         <span  ng-init="global.fNumber=‘1234567890‘"></span>
  3         <span  ng-init="global.fString=‘Hello filter from Michael Qin‘"></span>
  4         <span  ng-init="global.fArray=[‘Dog‘, ‘gOat‘, ‘cat‘]"></span>
  5         <span  ng-init="global.fObjArray=[{name: ‘dog‘, age: 10}, {name: ‘Goat‘, age: 20}, {name: ‘cat‘, age: 30}]"></span>
  6
  7         <script>
  8         var  myApp = angular.module(‘myApp‘, []);
  9         myApp.controller(‘ExampleController‘, function($scope) {
 10             $scope.global = {};
 11             $scope.global.fDate = new Date();
 12
 13             $scope.isCapitalized = function(str) {
 14                 return str[0] == str[0].toUpperCase();
 15             };
 16
 17         });
 18         </script>
 19
 20         <hr>
 21         <div>
 22             <label>uppercase lowercase实例</label><p></p>
 23             <strong>uppercase:</strong> <span>{{global.fString | uppercase}}</span> {{global.fString}}<br>
 24             <strong>lowercase:</strong> <span>{{global.fString | lowercase}}</span> <br>
 25         </div>
 26
 27
 28         <hr>
 29         <div>
 30             <label>date实例</label><p></p>
 31             {{global.fDate | date: ‘medium‘}} <br>
 32             {{global.fDate | date: ‘short‘}} <br>
 33             {{global.fDate | date: ‘fullDate‘}} <br>
 34             {{global.fDate | date: ‘longDate‘}} <br>
 35             {{global.fDate | date: ‘mediumDate‘}} <br>
 36             {{global.fDate | date: ‘shortDate‘}} <br>
 37             {{global.fDate | date: ‘mediumTime‘}} <br>
 38             {{global.fDate | date: ‘shortTime‘}} <br>
 39             {{global.fDate | date: ‘yyyy‘}} <br>
 40             {{global.fDate | date: ‘yy‘}} <br>
 41             {{global.fDate | date: ‘y‘}} <br>
 42             {{global.fDate | date: ‘MMMM‘}} <br>
 43             {{global.fDate | date: ‘MMM‘}} <br>
 44             {{global.fDate | date: ‘MM‘}} <br>
 45             {{global.fDate | date: ‘M‘}} <br>
 46             {{global.fDate | date: ‘dd‘}} <br>
 47             {{global.fDate | date: ‘d‘}} <br>
 48             {{global.fDate | date: ‘EEEE‘}} <br>
 49             {{global.fDate | date: ‘hh:mm:ss.sss‘}} <br>
 50             {{global.fDate | date: ‘yyyy-MM-dd hh:mm:ss‘}} <br>
 51             {{global.fDate | date: ‘yyyy/MM/dd hh:mm:ss‘}} <br>
 52             {{global.fDate | date: ‘MM/dd/yyyy hh:mm:ss‘}} <br>
 53         </div>
 54
 55         <hr>
 56         <div>
 57             <label>number实例</label><p></p>
 58             {{global.fNumber}} <br>
 59             {{global.fNumber | number}} <br>
 60             {{global.fNumber | number: 2}} <br>
 61             {{global.fNumber | number: 5}} <br>
 62         </div>
 63
 64         <hr>
 65         <div>
 66             <label>currency实例</label><p></p>
 67             {{global.fNumber | currency}} <br>
 68             {{global.fNumber | currency: "€"}} <br>
 69             {{global.fNumber | currency: "£"}} <br>
 70             {{global.fNumber | currency: "CNY"}} <br>
 71             {{global.fNumber | currency: "¥"}} <br>
 72             {{global.fNumber | currency: "元"}} <br>
 73             {{global.fNumber | currency: "圓"}} <br>
 74         </div>
 75
 76         <hr>
 77         <div>
 78             <label>json实例</label><p></p>
 79             {{global.fObjArray | json}} <br>
 80         </div>
 81
 82         <hr>
 83         <div>
 84             <label>filter实例</label><p></p>
 85             {{global.fArray | filter: ‘o‘ }} <br>
 86             {{global.fArray | filter: isCapitalized }} <br>
 87             {{global.fObjArray | filter:{name: ‘dog‘} }} <br>
 88         </div>
 89
 90         <hr>
 91         <div>
 92             <label>limitTo实例</label><p></p>
 93             {{global.fString | limitTo: 3 }} <br>
 94             {{global.fArray | limitTo: 2 }} <br>
 95             {{global.fObjArray | limitTo: -2 }} <br>
 96         </div>
 97
 98         <hr>
 99         <div>
100             <label>orderBy实例</label><p></p>
101             {{global.fObjArray | orderBy: ‘age‘ }} <br>
102             {{global.fObjArray | orderBy: ‘age‘: true }} <br>
103             {{global.fObjArray | orderBy: ‘-age‘}} <br>
104             {{global.fObjArray | orderBy: ‘age‘: false }} <br>
105             {{global.fObjArray | orderBy: ‘+age‘}} <br>
106         </div>
107
108         <hr>
109         <div>
110             <label>编程式使用filter实例</label><p></p>
111             <xmp>
112 $filter(‘filter‘)(array, expression, comparator)
113 $filter(‘currency‘)(amount, symbol, fractionSize)
114 $filter(‘number‘)(number, fractionSize)
115 $filter(‘date‘)(date, format, timezone)
116 $filter(‘json‘)(object, spacing)
117 $filter(‘lowercase‘)()
118 $filter(‘uppercase‘)()
119 $filter(‘limitTo‘)(input, limit, begin)
120 $filter(‘orderBy‘)(array, expression, reverse)
121             </xmp>
122         </div>
123
124         <hr>
125         <div>
126             <label>自定义filter实例</label><p></p>
127             <script>
128                 myApp.filter(‘age20‘, function() {
129                     return function(input) {
130                         for(var i = 0; i < input.length; i++) {
131                             if (input[i].age == 20) {
132                                 return input[i];
133                             }
134                         }
135                     };
136                 });
137             </script>
138             {{global.fObjArray | age20 }} <br>
139         </div>
140
141     <hr>
142     <hr>
143     </div>

3. 查看运行结果及基部源码

http://jimuyouyou.github.io/angular-bootstrap-rest-seed/examples/angular/4-filters.html

4. github项目地址

https://github.com/jimuyouyou/angular-bootstrap-rest-seed