在實際的開發(fā)過程中，很多後端返回給我們的數據都是需要格式化處理的，在angular中為我們內置提供了filter指令，可以很方便的對數據進行處理。首先我們看看在視圖中是如何使用過濾器的。
1、currency(貨幣)格式化
<div ng-controller="Aaa"> <p>{{name | currency:'￥'}}</p></div><script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.name = '12334.273489274834'; }]);</script>在name的數據後面使用｜符號表示啟用過濾器，如果對linux比較熟悉的話，這塊的｜根linux的管道功能。currency可以理解成函數，而'￥'則是函數的參數，如果不傳默認為$符號！
2、number(數字)格式化
<div ng-controller="Aaa"> <p>{{name | number:2}}</p></div><script type="text/javascript"> $scope.name = '12334.273489274834';</script>用來精確浮點數(精確到2位)默認是3位。
3、uppercase , lowercase(大小寫)格式化
<div ng-controller="Aaa"> <p>{{name | uppercase}}</p></div><script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.name = 'hello'; }]);</script>uppercase轉換成大寫，lowercase轉換成小寫
4、json(數據)格式化
<div ng-controller="Aaa"> <pre>{{name | json}}</pre></div><script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.name = { name : 'xcg',age : 19 }; }]);</script>以json的格式輸出到頁面中，視圖只能使用pre標簽才可以識別
5、limitTo(截取)格式化
<div ng-controller="Aaa"> <p>{{name | limitTo : 3}}</p></div><script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.name = '123456789'; }]);</script>截取字符串，數字不行。。。
6、limitTo(截取)格式化
<div ng-controller="Aaa"> <p>{{name | date : 'yyyy-MM-dd hh:mm:ss'}}</p> <p>{{name | date : 'MM/dd/yyyy @ h:mma'}}</p></div><script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.name = 1448022616463; }]);</script>7、orderBy(排序)格式化
<div ng-controller="Aaa"> <pre>{{name | orderBy : 'age' : true | json}}</pre><div><script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.name = [ {color : 'red',age : '10'}, {color : 'yellow',age : '20'}, {color : 'blue',age : '30'}, {color : 'green',age : '40'} ]; }]);</script>如果排序的值是字母，就按照字母的順序來排序。如果是數字，從大到小。傳入true則為逆向排序。
8、filter(篩選&過濾)格式化
<div ng-controller="Aaa"> <pre>{{name | filter : 'l' | json}}</pre></div><script type="text/javascript"> var m1 = angular.module('myApp',[]); m1.controller('Aaa',['$scope',function($scope){ $scope.name = [ {color : 'red',age : '10'}, {color : 'yellow',age : '20'}, {color : 'blue',age : '30'}, {color : 'green',age : '40'} ]; }]);</script>在filter傳入'l'，會篩選出blue以及yellow。
<pre>{{name | filter : 'yellow' : true | json}}</pre> 如果像這樣再傳入true，就必須保證value的完整性，單單的'l'是無法篩選出來的。
上面都是在視圖中以表達式的形式使用過濾器，下面我們來看看在JS中使用過濾器。
<div ng-controller="Aaa"> <p>{{currency}}</p> <p>{{number}}</p> <p>{{uppercase}}</p> <pre>{{json}}</pre> <p>{{limitTo}}</p> <p>{{date}}</p> <pre>{{orderBy}}</pre> <pre>{{filter}}</pre></div><script type="text/javascript">var m1 = angular.module('myApp',[]);m1.controller('Aaa',['$scope','$filter',function($scope,$filter){ var colors = [{color : 'red',age : '10'}, {color : 'yellow',age : '20'}, {color : 'blue',age : '30'}, {color : 'green',age : '40'}]; $scope.currency = $filter('currency')(12334.273489274834,'￥'); $scope.number = $filter('number')('12334.273489274834',2); $scope.uppercase = $filter('uppercase')('hello'); $scope.json = $filter('json')({ name : 'xcg',age : 19 }); $scope.limitTo = $filter('limitTo')('xiecg',2); $scope.date = $filter('date')('1448106268837','yyyy-MM-dd hh:mm:ss'); $scope.orderBy = $filter('orderBy')(colors,'age',true); $scope.filter = $filter('filter')(colors,'l');}]);</script>這些都屬于內置過濾器，我們還可以用.filter自定義過濾器。
<div ng-controller="Aaa"> <p>{{name | firstUpper : 2}}</p> </div><script type="text/javascript">var m1 = angular.module('myApp',[]);//自定義過濾器m1.filter('firstUpper',function(){ return function(str,num){ console.log(num); //2，得到傳遞的參數 return str.charAt(0).toUpperCase() + str.substring(1); }});m1.controller('Aaa',['$scope','$filter',function($scope,$filter){ $scope.name = 'hollo';}]);</script>這里我們自定義了一個首字母大寫的方法，例子是在視圖中使用的，也可以在JS中使用過濾器。
以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，同時也希望多多支持武林網！
新聞熱點
疑難解答
