使用AngularJS创建自定义的过滤器的方法

前端技术 2023/09/04 JavaScript

Angularjs过滤器是 angularjs非常棒的特性之一。有朝一日，你可能需要使用自定义过滤器，幸运的是，你找到了这篇博文。

下面显示的是自定义过滤器长什么样子(请注意myfilter):

我们的自定义过滤器叫做 \"myfilter\", 它有由 \':\'隔开的4个参数.

这是一个将会用到的样本输入:


  $scope.friends = [{name:\'John\', phone:\'555-1276\'}, 
           {name:\'Annie\', phone:\'800-BIG-MARY\'}, 
           {name:\'Mike\', phone:\'555-4321\'}, 
           {name:\'Adam\', phone:\'555-5678\'}, 
           {name:\'David\', phone:\'555-8765\'}, 
           {name:\'Mikay\', phone:\'555-5678\'}];

过滤器只显示电话号码中含有 \"555\"的项，这是样本输出:

 

 Name   Phone 
 John   555-1276 
 Mike   555-4321 
 Adam   555-5678 
 David   555-8765 
 Mikay   555-5678

过滤\"555\"的处理流程由 \"windowScopedFilter\"执行, 它是过滤器 \'myfilter\'的第四个参数.
 

下面我们来实现这些功能 (把logging添加到每个输入参数):
 

 var myapp = angular.module(\'MyFilterApp\', []); 
 myapp.filter(\'myfilter\', function() { 
  return function(input, param1) { 
   console.log(\"------------------------------------------------- begin dump of custom parameters\"); 
   console.log(\"input=\",input); 
   console.log(\"param1(string)=\", param1); 
   var args = Array.prototype.slice.call(arguments); 
   console.log(\"arguments=\", args.length); 
   if (3<=args.length) { 
      console.log(\"param2(string)=\", args[2]); 
   } 
   if (4<=args.length) { 
      console.log(\"param3(bool)=\", args[3]); 
   } 
   console.log(\"------------------------------------------------- end dump of custom parameters\"); 
   // filter 
   if (5<=args.length) { 
      return window[args[4]](input); 
   } 
   return input; 
  }; 
 });

上面的代码大多都log了(译者注：将信息显示到控制台). 实际完成过滤的最重要的一部分是:
 

   // filter 
   if (5<=args.length) { 
      return window[args[4]](input); 
   } 
   return input;


\"return window[args[4]](input)\" 调用第四个参数, 它是 \'windowScopedFilter\'.

这是控制台输出:

 
 \"------------------------------------------------- begin dump of custom parameters\" custom_filter_function.html:21 
 \"input=\" [object Array] custom_filter_function.html:22 
 \"param1(string)=\" \"param1\" custom_filter_function.html:23 
 \"arguments=\" 5 custom_filter_function.html:25 
 \"param2(string)=\" \"param2\" custom_filter_function.html:27 
 \"param3(bool)=\" true custom_filter_function.html:30 
 \"------------------------------------------------- end dump of custom parameters\" custom_filter_function.html:32 
 \"------------------------------------------------- begin dump of custom parameters\" custom_filter_function.html:21 
 \"input=\" [object Array] custom_filter_function.html:22 
 \"param1(string)=\" \"param1\" custom_filter_function.html:23 
 \"arguments=\" 5 custom_filter_function.html:25 
 \"param2(string)=\" \"param2\" custom_filter_function.html:27 
 \"param3(bool)=\" true custom_filter_function.html:30 
 \"------------------------------------------------- end dump of custom parameters\" custom_filter_function.html:32

完整代码:
 
 

<html> 
 <head> 
 <script src=\"angular.min.js\"></script> 
 <script type=\"text/javascript\"> 
 function windowScopedFilter (input) { 
   var output = []; 
   angular.forEach(input, function(v,k){ 
      if (v.phone.contains(\"555\")) { 
        output.push(v); 
      } 
   }); 
   return output;    
 } 
 var myapp = angular.module(\'MyFilterApp\', []); 
 myapp.filter(\'myfilter\', function() { 
  return function(input, param1) { 
   console.log(\"------------------------------------------------- begin dump of custom parameters\"); 
   console.log(\"input=\",input); 
   console.log(\"param1(string)=\", param1); 
   var args = Array.prototype.slice.call(arguments); 
   console.log(\"arguments=\", args.length); 
   if (3<=args.length) { 
      console.log(\"param2(string)=\", args[2]); 
   } 
   if (4<=args.length) { 
      console.log(\"param3(bool)=\", args[3]); 
   } 
   console.log(\"------------------------------------------------- end dump of custom parameters\"); 
   // filter 
   if (5<=args.length) { 
      return window[args[4]](input); 
   } 
   return input; 
  }; 
 }); 
 myapp.controller(\'MyFilterController\', [\'$scope\', function($scope) { 
  $scope.friends = [{name:\'John\', phone:\'555-1276\'}, 
           {name:\'Annie\', phone:\'800-BIG-MARY\'}, 
           {name:\'Mike\', phone:\'555-4321\'}, 
           {name:\'Adam\', phone:\'555-5678\'}, 
           {name:\'David\', phone:\'555-8765\'}, 
           {name:\'Mikay\', phone:\'555-5678\'}]; 
 }]); 
 </script> 
 </head> 
 <body ng-app=\"MyFilterApp\"> 
 <div ng-controller=\"MyFilterController\"> 
   <table id=\"searchTextResults\"> 
    <tr><th>Name</th><th>Phone</th></tr> 
    <tr ng-repeat=\"friend in friends |myfilter:\'param1\':\'param2\':true:\'windowScopedFilter\'\"> 
    <td>{{friend.name}}</td> 
    <td>{{friend.phone}}</td> 
    </tr> 
   </table> 
 </div> 
 <hr> 
 </body> 
 </html>

本文地址：https://www.stayed.cn/item/10711

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案