当前位置：首页 >

AngularJS中的过滤器（filter）

发布时间：2023/12/19 38 豆豆

生活随笔收集整理的这篇文章主要介绍了 AngularJS中的过滤器（filter）小编觉得挺不错的,现在分享给大家,帮大家做个参考.

AngularJS中的过滤器是用于对数据的格式化，或者筛选的函数，可以直接通过以下语法使用：

{{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 专题之函数柯里化