深究AngularJS——过滤器（filter）

约定不等于承诺〃 2022-07-24 05:19 151阅读 0赞

写这个的目的是希望能学会如何在指令里加入自己的过滤器。

# **1.关于过滤器你需要了解这些** #

### **1.过滤器的作用**： ###

是将我们的现有的数据进行处理，比如重排序、转换大小写、计算等等，处理完了再返回一个结果。

### **2.AngularJS自带的过滤器**： ###

<table> 
 <thead> 
  <tr> 
   <th>过滤器</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>currency</td> 
   <td>格式化数字为货币格式。</td> 
  </tr> 
  <tr> 
   <td>filter</td> 
   <td>从数组项中选择一个子集。</td> 
  </tr> 
  <tr> 
   <td>lowercase</td> 
   <td>格式化字符串为小写。</td> 
  </tr> 
  <tr> 
   <td>orderBy</td> 
   <td>根据某个字段属性重新排序。</td> 
  </tr> 
  <tr> 
   <td>uppercase</td> 
   <td>格式化字符串为大写。</td> 
  </tr> 
 </tbody> 
</table>

### **3.使用过滤器**： ###

可在如下三个地方使用过滤器，在页面上使用时，通过一个管道符（|）和过滤器名字，

<body> <div ng-app="myApp" ng-controller="myCtrl">  <h1>{ { "xywz" | uppercase}}</h1>  <p ng-repeat="r in data |orderBy :'time'">{ { r.result}}</p> </div> <script> var app = angular.module('myApp', []); //3.控制器中使用过滤器 app.controller('myCtrl', function($scope, $filter) { $scope.data = [{ 'time':2014,'result':'赚钱了'},{ 'time':2015,'result':'亏大发了'}] ; console.log($filter("orderBy")($scope.data,"time")); }); </script> </body>

# 2.如何写自己的过滤器（关键） #

我以一个将字符串折分成数组的过滤器举例。在页面上需要传两参数时，就在过滤器后面以冒号（:）隔开，如下面要传的分割器；在页面要实现传三个及以上的参数时，我们可以通过在过滤器后面继续加冒号（ :） 和参数的格式添加。总结就是，第一个参数是管道符号前面的数据，多个参数时，在过滤器名称后面以冒号隔开。

<body> <div ng-app="myApp" ng-controller="myCtrl"> <p ng-repeat="r in data | toArray">{ { r}}</p> <p ng-repeat="r in data2 | toArray:';'">{ { r}}</p> </div> <script> var app = angular.module('myApp', []); //控制器 app.controller('myCtrl', function($scope, $filter) { $scope.data ="abc,mn,大山,绿水"; $scope.data2 ="abc;mn;大山;绿水";//需要给定分割器 }); //将字符串分割成数组 app.filter("toArray",function(){ return function(data,separator){ if(data){ if(!separator) { separator = ",";//默认逗号分割 } return data.split(separator); }else{ return [];//得到的结果类型始终为数组类型 } } }); </script> </body>

# **3.过滤器中注入服务** #

<body> <div ng-app="myApp"> 在过滤器中使用服务: <h1>{ {255 | myFormat}}</h1> </div> <script> var app = angular.module('myApp', []); //自定义服务 app.service('hexafy', function() { this.myFunc = function (x) { return x.toString(16); } }); //过滤器 app.filter('myFormat',['hexafy', function(hexafy) { return function(x) { return hexafy.myFunc(x); }; }]); </script> </body>