寫這個(gè)的目的是希望能學(xué)會(huì)如何在指令里加入自己的過濾器。
是將我們的現(xiàn)有的數(shù)據(jù)進(jìn)行處理，比如重排序、轉(zhuǎn)換大小寫、計(jì)算等等，處理完了再返回一個(gè)結(jié)果。
| 過濾器 | 描述 |
|---|---|
| currency | 格式化數(shù)字為貨幣格式。 |
| filter | 從數(shù)組項(xiàng)中選擇一個(gè)子集。 |
| lowercase | 格式化字符串為小寫。 |
| orderBy | 根據(jù)某個(gè)字段屬性重新排序。 |
| uppercase | 格式化字符串為大寫。 |
可在如下三個(gè)地方使用過濾器，在頁面上使用時(shí)，通過一個(gè)管道符（|）和過濾器名字，
<body><div ng-app="myApp" ng-controller="myCtrl"><!-- 1.在表達(dá)式中使用過濾器 --><h1>{{"xywz" | uppercase}}</h1><!-- 2.在指令中使用過濾器 --><p ng-repeat="r in data |orderBy :'time'">{{r.result}}</p></div><script>var app = angular.module('myApp', []);//3.控制器中使用過濾器app.controller('myCtrl', function($scope, $filter) {$scope.data = [{'time':2014,'result':'賺錢了'},{'time':2015,'result':'虧大發(fā)了'}] ;console.log($filter("orderBy")($scope.data,"time"));});</script></body>我以一個(gè)將字符串折分成數(shù)組的過濾器舉例。在頁面上需要傳兩參數(shù)時(shí)，就在過濾器后面以冒號（:）隔開，如下面要傳的分割器；在頁面要實(shí)現(xiàn)傳三個(gè)及以上的參數(shù)時(shí)，我們可以通過在過濾器后面繼續(xù)加冒號（ :） 和參數(shù)的格式添加?？偨Y(jié)就是，第一個(gè)參數(shù)是管道符號前面的數(shù)據(jù)，多個(gè)參數(shù)時(shí)，在過濾器名稱后面以冒號隔開。
<body><div ng-app="myApp" ng-controller="myCtrl"><p ng-repeat="r in data | toArray">{{r}}</p><p ng-repeat="r in data2 | toArray:';'">{{r}}</p></div><script>var app = angular.module('myApp', []);//控制器app.controller('myCtrl', function($scope, $filter) {$scope.data ="abc,mn,大山,綠水";$scope.data2 ="abc;mn;大山;綠水";//需要給定分割器});//將字符串分割成數(shù)組app.filter("toArray",function(){return function(data,separator){if(data){if(!separator) {separator = ",";//默認(rèn)逗號分割}return data.split(separator);}else{return [];//得到的結(jié)果類型始終為數(shù)組類型 }}});</script></body><body><div ng-app="myApp">在過濾器中使用服務(wù):<h1>{{255 | myFormat}}</h1></div><script>var app = angular.module('myApp', []);//自定義服務(wù)app.service('hexafy', function() {this.myFunc = function (x) {return x.toString(16);}});//過濾器app.filter('myFormat',['hexafy', function(hexafy) {return function(x) {return hexafy.myFunc(x);};}]);</script></body>
