本文實例講述了AngularJS常見過濾器用法。分享給大家供大家參考，具體如下：
過濾器用來格式化需要展示給用戶的數(shù)據(jù)。在HTML中的模板綁定符號 {{ }} 內(nèi)通過 | 符號來調(diào)用過濾器。以下是常用的過濾器。
大小寫過濾器
{{ name | uppercase }} 大寫過濾器
{{ name | lowercase}} 小寫過濾器
實例：（大寫過濾器）
<div ng-controller='myController'> 姓氏: <input type="text" ng-model="student.firstName"></br></br> 名字: <input type="text" ng-model="student.lastName"></br></br> 名字轉(zhuǎn)大寫: {{student.fullName() | uppercase}}</div><script>var app=angular.module('app',[]);app.controller('myController',function($scope){ $scope.student={ firstName: "xu", lastName: "xiaohong", fullName:function(){ var studentObject; studentObject = $scope.student; return studentObject.firstName + studentObject.lastName; } };});</script>貨幣過濾器
currecy 過濾器可以將一個數(shù)值格式化為貨幣格式。用 {{ 123 | currency }} 來將123轉(zhuǎn)化成貨幣格式。currecy 過濾器允許我們自己設(shè)置貨幣符號。默認(rèn)情況下會采用客戶端所處區(qū)域的貨幣符號，但是也可以自定義貨幣符號。如下：
<div ng-controller='myController'> Enter fees: <input type="text" ng-model="student.fees"></br> fees: {{student.fees | currency:'￥'}}</div><script>var app=angular.module('app',[]);app.controller('myController',function($scope){ $scope.student={ fees:500 };});</script>日期過濾器
date 過濾器可以將日期格式化成需要的格式。如下：
<div ng-controller='myController'> {{data | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}</div><script>var app=angular.module('app',[]);app.controller('myController',function($scope){ $scope.data=new Date();});</script>limitTo過濾器
limitTo過濾器用來截取數(shù)組或字符串，接收一個參數(shù)用來指定截取的長度。實例：
<body ng-controller="test"> {{ childrenArray | limitTo : 2 }} <script> var app=angular.module('app',[]); app.controller('test',function($scope){ $scope.childrenArray = [ {name:'kimi',age:3}, {name:'cindy',age:4}, {name:'anglar',age:4}, {name:'shitou',age:6}, {name:'tiantian',age:5} ]; }); </script></body>orderBy過濾器：
orderBy過濾器可以將一個數(shù)組中的元素進(jìn)行排序，接收一個參數(shù)來指定排序規(guī)則，參數(shù)可以是一個字符串，表示以該屬性名稱進(jìn)行排序。可以是一個函數(shù)，定義排序?qū)傩浴＿€可以是一個數(shù)組，表示依次按數(shù)組中的屬性值進(jìn)行排序（若按第一項比較的值相等，再按第二項比較），還是拿上面的孩子數(shù)組舉例：
<div>{{ childrenArray | orderBy : 'age' }}</div> //按age屬性值進(jìn)行排序<div>{{ childrenArray | orderBy : orderFunc }}</div> //按照函數(shù)的返回值進(jìn)行排序<div>{{ childrenArray | orderBy : ['age','name'] }}</div> //如果age相同，按照name進(jìn)行排序自定義過濾器：
AngularJS編寫自定義過濾器的形式和AngularJS的factory service非常相像，一定記得它返回一個對象或者是一個函數(shù)即可，編寫的時候，只需要一個帶有一個以上參數(shù)的函數(shù)即可。格式大致如下：
app.filter('filter(過濾器)名稱',function(){ return function(需要過濾的對象,過濾器參數(shù)1,過濾器參數(shù)2,...){ //...執(zhí)行業(yè)務(wù)邏輯代碼 return 處理后的對象; }});實例：（首字母大寫）
{{ 'ginger loves dog treats' | capitalize }}<script> var app=angular.module('app',[]); app.filter('capitalize',function(){ return function(input){ if(input){ return input.charAt(0).toUpperCase() + input.slice(1); } } })</script>更多關(guān)于AngularJS相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《AngularJS指令操作技巧總結(jié)》、《AngularJS入門與進(jìn)階教程》及《AngularJS MVC架構(gòu)總結(jié)》
希望本文所述對大家AngularJS程序設(shè)計有所幫助。
新聞熱點
疑難解答
