當前位置：
首頁 >
前端技术
> javascript
>内容正文
javascript
深究AngularJS——过滤器（filter）
生活随笔
收集整理的這篇文章主要介紹了
深究AngularJS——过滤器（filter）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
寫這個的目的是希望能學會如何在指令里加入自己的過濾器。
1.關于過濾器你需要了解這些
1.過濾器的作用：
是將我們的現有的數據進行處理，比如重排序、轉換大小寫、計算等等，處理完了再返回一個結果。
2.AngularJS自帶的過濾器：
| currency | 格式化數字為貨幣格式。 |
| filter | 從數組項中選擇一個子集。 |
| lowercase | 格式化字符串為小寫。 |
| orderBy | 根據某個字段屬性重新排序。 |
| uppercase | 格式化字符串為大寫。 |
3.使用過濾器：
可在如下三個地方使用過濾器，在頁面上使用時，通過一個管道符（|）和過濾器名字，
<body> <div ng-app="myApp" ng-controller="myCtrl"> <!-- 1.在表達式中使用過濾器 --><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':'虧大發了'}] ;console.log($filter("orderBy")($scope.data,"time"));}); </script> </body>2.如何寫自己的過濾器（關鍵）
我以一個將字符串折分成數組的過濾器舉例。在頁面上需要傳兩參數時，就在過濾器后面以冒號（:）隔開，如下面要傳的分割器；在頁面要實現傳三個及以上的參數時，我們可以通過在過濾器后面繼續加冒號（ :） 和參數的格式添加。總結就是，第一個參數是管道符號前面的數據，多個參數時，在過濾器名稱后面以冒號隔開。
<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;大山;綠水";//需要給定分割器});//將字符串分割成數組app.filter("toArray",function(){return function(data,separator){if(data){if(!separator) {separator = ",";//默認逗號分割}return data.split(separator);}else{return [];//得到的結果類型始終為數組類型 }}}); </script> </body>3.過濾器中注入服務
<body> <div ng-app="myApp">在過濾器中使用服務:<h1>{{255 | myFormat}}</h1> </div><script>var app = angular.module('myApp', []);//自定義服務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>總結
以上是生活随笔為你收集整理的深究AngularJS——过滤器（filter）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 线程的3种创建方式
- 下一篇： 深究AngularJS——ng-drag