詳解Angular的內(nèi)置過濾器和自定義過濾器【推薦】
在實際的開發(fā)過程中,很多後端返回給我們的數(shù)據(jù)都是需要格式化處理的,在angular中為我們內(nèi)置提供了filter指令,可以很方便的對數(shù)據(jù)進行處理。首先我們看看在視圖中是如何使用過濾器的。
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ù)後面使用|符號表示啟用過濾器,如果對linux比較熟悉的話,這塊的|根linux的管道功能。currency可以理解成函數(shù),而'¥'則是函數(shù)的參數(shù),如果不傳默認為$符號!
2、number(數(shù)字)格式化
<div ng-controller="Aaa"> <p>{{name | number:2}}</p> </div> <script type="text/javascript"> $scope.name = '12334.273489274834'; </script>
用來精確浮點數(shù)(精確到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轉(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的格式輸出到頁面中,視圖只能使用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>
截取字符串,數(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>
如果排序的值是字母,就按照字母的順序來排序。如果是數(shù)字,從大到小。傳入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>
這些都屬于內(nèi)置過濾器,我們還可以用.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,得到傳遞的參數(shù) return str.charAt(0).toUpperCase() + str.substring(1); } }); m1.controller('Aaa',['$scope','$filter',function($scope,$filter){ $scope.name = 'hollo'; }]); </script>
這里我們自定義了一個首字母大寫的方法,例子是在視圖中使用的,也可以在JS中使用過濾器。
以上就是本文的全部內(nèi)容,希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作能帶來一定的幫助,同時也希望多多支持腳本之家!
- 詳解AngularJS中自定義過濾器
- 詳解AngularJS中$filter過濾器使用(自定義過濾器)
- AngularJS使用Filter自定義過濾器控制ng-repeat去除重復(fù)功能示例
- AngularJS 自定義過濾器詳解及實例代碼
- AngularJS自定義過濾器用法經(jīng)典實例總結(jié)
- Angularjs 依賴壓縮及自定義過濾器寫法
- angularJs自定義過濾器實現(xiàn)手機號信息隱藏的方法
- AngularJS實現(xiàn)的自定義過濾器簡單示例
- 簡述angular自定義過濾器在頁面和控制器中的使用
- Angular.Js中過濾器filter與自定義過濾器filter實例詳解
- angularjs自定義過濾器demo示例
相關(guān)文章
使用Angular CLI生成 Angular 5項目教程詳解
這篇文章主要介紹了使用Angular CLI生成 Angular 5項目的教程詳解 ,需要的朋友可以參考下2018-03-03AngularJS修改model值時,顯示內(nèi)容不變的實例
今天小編就為大家分享一篇AngularJS修改model值時,顯示內(nèi)容不變的實例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09Angular5中提取公共組件之radio list的實例代碼
這篇文章主要介紹了Angular5中提取公共組件之radio list的實例代碼,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2018-07-07在Angular中使用NgTemplateOutlet創(chuàng)建可重用組件的流程步驟
在 Angular 中,使用 NgTemplateOutlet 而不是創(chuàng)建特定組件,可以使組件在不修改組件本身的情況下輕松修改為各種用例,在本文中,您將接受一個現(xiàn)有組件并重寫它以使用 NgTemplateOutlet,需要的朋友可以參考下2024-03-03