當前位置：首頁 > 前端技术 > javascript >内容正文

javascript

AngularJS中的过滤器（filter）

發布時間：2023/12/19 javascript 27 豆豆

生活随笔收集整理的這篇文章主要介紹了 AngularJS中的过滤器（filter）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

??AngularJS中的過濾器是用于對數據的格式化，或者篩選的函數，可以直接通過以下語法使用：

? {{expression|filter}}

? {{expression|filter1|filter2}}

? {{expression|filter1:param1,param2,...|filter2}

? 過濾器的種類有number，currency，date，json，limitTo，lowercase，uppercase，filter，orderBy。

  <!DOCTYPE?html>  <html?ng-app="app">    <head>   ????<meta?charset="utf-8">   </head>    <body?ng-app="app">   ????<div?ng-controller="Controller1">   ????????<p>{{1234567890?|?number}}</p>   ????????<!--顯示1,234,567,890-->   ????????<p>{{1234.56789?|?number:3}}</p>   ????????<!--顯示1,234.568，保留3位小數-->   ????????<p>{{1234.56789?|?currency}}</p>   ????????<!--顯示$1,234.57，貨幣，默認的前綴是美元符號-->   ????????<p>{{1234.56789?|?currency:'￥'}}</p>   ????????<!--顯示￥1,234.57-->   ????????<p>{{today?|?date:'medium'}}</p>   ????????<!--顯示Jun?28,?2015?3:45:54?PM-->   ????????<p>{{today?|?date:'short'}}</p>   ????????<!--顯示6/28/15?3:45?PM-->   ????????<p>{{today?|?date:'fullDate'}}</p>   ????????<!--顯示Sunday,?June?28,?2015-->   ????????<p>{{today?|?date:'longDate'}}</p>   ????????<!--顯示June?28,?2015-->   ????????<p>{{today?|?date:'shortDate'}}</p>   ????????<!--顯示6/28/15-->   ????????<p>{{today?|?date:'shortTime'}}</p>   ????????<!--顯示3:45?PM-->   ????????<p>{{today?|?date:'mediumTime'}}</p>   ????????<!--顯示3:45:54?PM-->   ????????<p>{{today?|?date:'yyyy-MM-dd?HH:mm:ss'}}</p>   ????????<!--顯示2015-06-28?15:45:54-->   ????????<p>{{['a','b','c','d','e']?|?limitTo:3}}</p>   ????????<!--顯示["a","b","c"]，截取前3位-->   ????????<p>{{['a','b','c','d','e']?|?limitTo:-3}}</p>   ????????<!--顯示["c","d","e"]，截取后3位-->   ????????<p>{{'Hello?World'?|?lowercase}}</p>   ????????<!--顯示hello?world-->   ????????<p>{{'Hello?World'?|?uppercase}}</p>   ????????<!--顯示HELLO?WORLD-->   ????????<p>{{data.phone?|?filter:'le'}}</p>   ????????<!--顯示[{"name":"iPhone","company":"Apple"}]，只匹配value值-->   ????????<p>{{data.phone?|?filter:{company:'A'}?}}</p>   ????????<!--顯示[{"name":"iPhone","company":"Apple"},{"name":"HUAWEI?P8","company":"HUAWEI"}]，company中有A就會匹配到-->   ????????<p>{{data.phone?|?orderBy:'name'}}</p>   ????????<!--顯示[{"name":"Galaxy?S5","company":"Sumsung"},{"name":"HUAWEI?P8","company":"HUAWEI"},{"name":"iPhone","company":"Apple"}]，以name的值做排序，默認是從小到大排序-->   ????????<p>{{data.phone?|?orderBy:-'name'}}</p>   ????????<!--顯示[{"name":"iPhone","company":"Apple"},{"name":"Galaxy?S5","company":"Sumsung"},{"name":"HUAWEI?P8","company":"HUAWEI"}]，反序-->   ????????<p>{{[2,24,13,89,3,8,41,9,10]?|?filter:checkNum}}</p>   ????????<!--自定義的過濾器，顯示[2,3,8,9,10]，定義見90~95行-->   ????</div>   ????<script?src="../JS/angular.min.js"></script>   ????<script?type="text/javascript">   ????angular.module('app',?[])   ????????.controller('Controller1',?function($scope,?$filter)?{   ????????????$scope.today?=?new?Date;   ????????????$scope.data?=?{   ????????????????phone:?[{   ????????????????????name:?'iPhone',   ????????????????????company:?'Apple'   ????????????????},?{   ????????????????????name:?'Galaxy?S5',   ????????????????????company:?'Sumsung'   ????????????????},?{   ????????????????????name:?'HUAWEI?P8',   ????????????????????company:?'HUAWEI'   ????????????????}]   ????????????};   ????????????var?jsonString?=?$filter('json')($scope.data);   ????????????console.log(jsonString);   ????????????/*?console輸出json格式的data   ????????????{   ????????????????"phone":?[   ??????????????????{   ????????????????????"name":?"iPhone",   ????????????????????"company":?"Apple"   ??????????????????},   ??????????????????{   ????????????????????"name":?"Galaxy?S5",   ????????????????????"company":?"Sumsung"   ??????????????????},   ??????????????????{   ????????????????????"name":?"HUAWEI?P8",   ????????????????????"company":?"HUAWEI"   ??????????????????}   ????????????????]   ????????????}   ????????????*/   ????????????//自定義過濾器   ????????????$scope.checkNum?=?function(num)?{   ????????????????//>10的不保留   ????????????????if?(num?>?10)?return?false;   ????????????????else?return?true;   ????????????}   ????????});   ????</script>   </body>    </html>   

? ? ? ?除了上面自定義過濾器的方法外，還有兩種專門的方法。

? ? ? ?第一種 module.filter(name,filterFactory)

? ? ? ?第二種 @$filterProvider.register();

第一種的例子

  <!DOCTYPE?html>  <html?ng-app="app">    <head>   ????<meta?charset="utf-8">   </head>    <body?ng-app="app">   ????<div?ng-controller="Controller1">   ????????<ul>   ????????????<!--?循環輸出data里面的數據，用自定義的名為filterAge的過濾器過濾?-->   ????????????<li?ng-repeat="item?in?data?|?filterAge">   ????????????????`item`.`name`?`item`.`age`?`item`.`position`   ????????????</li>   ????????</ul>   ????</div>   ????<script?src="../JS/angular.min.js"></script>   ????<script?type="text/javascript">   ????angular.module('app',?[],?function($provide)?{   ????????????//service提供數據   ????????????$provide.service('data',?function()?{   ????????????????return?[{   ????????????????????name:?'Wilshere',   ????????????????????age:?23,   ????????????????????position:?'midfield'   ????????????????},?{   ????????????????????name:?'Giroud',   ????????????????????age:?28,   ????????????????????position:?'striker'   ????????????????},?{   ????????????????????name:?'Cech',   ????????????????????age:?33,   ????????????????????position:?'goalkeeper'   ????????????????}];   ????????????});   ????????})   ????????//用.filter的方法定義過濾器   ????????.filter('filterAge',?function()?{   ????????????return?function(obj)?{   ????????????????//obj是過濾前的對象   ????????????????var?newObj?=?[];   ????????????????angular.forEach(obj,?function(i)?{   ????????????????????if?(i.age?>?25)?{   ????????????????????????newObj.push(i);   ????????????????????}   ????????????????});   ????????????????return?newObj;   ????????????}   ????????})   ????????.controller('Controller1',?function($scope,?data)?{   ????????????$scope.data?=?data;   ????????});   ????</script>   </body>    </html>   

第二種的例子

  <!DOCTYPE?html>  <html?ng-app="app">    <head>   ????<meta?charset="utf-8">   </head>    <body?ng-app="app">   ????<div?ng-controller="Controller1">   ????????<ul>   ????????????<!--?循環輸出data里面的數據，用自定義的名為filterAge的過濾器過濾?-->   ????????????<li?ng-repeat="item?in?data?|?filterAge">   ????????????????`item`.`name`?`item`.`age`?`item`.`position`   ????????????</li>   ????????</ul>   ????</div>   ????<script?src="../JS/angular.min.js"></script>   ????<script?type="text/javascript">   ????angular.module('app',?[],?function($filterProvider,?$provide)?{   ????????????//用注冊的方法自定義過濾器   ????????????$filterProvider.register('filterAge',?function()?{   ????????????????return?function(obj)?{   ????????????????????var?newObj?=?[];   ????????????????????angular.forEach(obj,?function(i)?{   ????????????????????????//age大于25的才會輸出   ????????????????????????if?(i.age?>?25)?{   ????????????????????????????newObj.push(i);   ????????????????????????}   ????????????????????});   ????????????????????return?newObj;   ????????????????}   ????????????});   ????????????//service提供數據   ????????????$provide.service('data',?function()?{   ????????????????return?[{   ????????????????????name:?'Wilshere',   ????????????????????age:?23,   ????????????????????position:?'midfield'   ????????????????},?{   ????????????????????name:?'Giroud',   ????????????????????age:?28,   ????????????????????position:?'striker'   ????????????????},?{   ????????????????????name:?'Cech',   ????????????????????age:?33,   ????????????????????position:?'goalkeeper'   ????????????????}];   ????????????});   ????????})   ????????.controller('Controller1',?function($scope,?data)?{   ????????????$scope.data?=?data;   ????????});   ????</script>   </body>    </html>   

本文轉自 iampomelo 51CTO博客，原文鏈接：http://blog.51cto.com/iampomelo/1668754，如需轉載請自行聯系原作者

總結

以上是生活随笔為你收集整理的AngularJS中的过滤器（filter）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇：大屏网页手机缩放html,大屏页面三种缩
下一篇： JavaScript 专题之函数柯里化