快捷導(dǎo)航

詳解Angular的內(nèi)置過(guò)濾器和自定義過(guò)濾器【推薦】

更新時(shí)間：2016年12月26日 15:16:40 作者：小謝53

在實(shí)際的開發(fā)過(guò)程中，很多后端返回給我們的數(shù)據(jù)都是需要格式化處理的，在angular中為我們內(nèi)置提供了filter指令，可以很方便的對(duì)數(shù)據(jù)進(jìn)行處理。本文將對(duì)Angular的內(nèi)置過(guò)濾器和自定義過(guò)濾器進(jìn)行詳細(xì)介紹，下面跟著小編一起來(lái)看下吧

在實(shí)際的開發(fā)過(guò)程中，很多後端返回給我們的數(shù)據(jù)都是需要格式化處理的，在angular中為我們內(nèi)置提供了filter指令，可以很方便的對(duì)數(shù)據(jù)進(jìn)行處理。首先我們看看在視圖中是如何使用過(guò)濾器的。

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的數(shù)據(jù)後面使用｜符號(hào)表示啟用過(guò)濾器，如果對(duì)linux比較熟悉的話，這塊的｜根linux的管道功能。currency可以理解成函數(shù)，而'￥'則是函數(shù)的參數(shù)，如果不傳默認(rèn)為$符號(hào)！

2、number(數(shù)字)格式化

<div ng-controller="Aaa">
 <p>{{name | number:2}}</p>
</div>
<script type="text/javascript">
 $scope.name = '12334.273489274834';
</script>

用來(lái)精確浮點(diǎn)數(shù)(精確到2位)默認(rèn)是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轉(zhuǎn)換成大寫，lowercase轉(zhuǎn)換成小寫

4、json(數(shù)據(jù))格式化

<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的格式輸出到頁(yè)面中，視圖只能使用pre標(biāo)簽才可以識(shí)別

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>

截取字符串，數(shù)字不行。。。

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>

如果排序的值是字母，就按照字母的順序來(lái)排序。如果是數(shù)字，從大到小。傳入true則為逆向排序。

8、filter(篩選&過(guò)濾)格式化

<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'，會(huì)篩選出blue以及yellow。

<pre>{{name | filter : 'yellow' : true | json}}</pre> 如果像這樣再傳入true，就必須保證value的完整性，單單的'l'是無(wú)法篩選出來(lái)的。

上面都是在視圖中以表達(dá)式的形式使用過(guò)濾器，下面我們來(lái)看看在JS中使用過(guò)濾器。

<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>

這些都屬于內(nèi)置過(guò)濾器，我們還可以用.filter自定義過(guò)濾器。

<div ng-controller="Aaa">
 <p>{{name | firstUpper : 2}}</p> 
</div>
<script type="text/javascript">
var m1 = angular.module('myApp',[]);
//自定義過(guò)濾器
m1.filter('firstUpper',function(){
 return function(str,num){
  console.log(num); //2，得到傳遞的參數(shù)
  return str.charAt(0).toUpperCase() + str.substring(1);
 }
});
m1.controller('Aaa',['$scope','$filter',function($scope,$filter){
 $scope.name = 'hollo';
}]);
</script>

這里我們自定義了一個(gè)首字母大寫的方法，例子是在視圖中使用的，也可以在JS中使用過(guò)濾器。

以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！

您可能感興趣的文章: