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


Posted in Javascript onJune 18, 2015

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>
Javascript 相关文章推荐
屏蔽鼠标右键、Ctrl+n、shift+F10、F5刷新、退格键 的javascript代码
Apr 01 Javascript
优化javascript的执行速度
Jan 23 Javascript
Javascript 函数parseInt()转换时出现bug问题
May 20 Javascript
IE下使用jQuery重置iframe地址时内存泄露问题解决办法
Feb 05 Javascript
jQuery轮播图效果精简版完整示例
Sep 04 Javascript
JavaScrpt的面向对象全面解析
May 09 Javascript
JS实现点击循环切换显示内容的方法
Oct 19 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
Mar 19 jQuery
原生JavaScript创建不可变对象的方法简单示例
May 07 Javascript
ES6中的Javascript解构的实现
Oct 30 Javascript
详解nginx配置vue h5 history去除#号
Nov 09 Javascript
深入讲解AngularJS中的自定义指令的使用
Jun 18 #Javascript
3个可以改善用户体验的AngularJS指令介绍
Jun 18 #Javascript
在AngularJS应用中实现一些动画效果的代码
Jun 18 #Javascript
使用AngularJS对路由进行安全性处理的方法
Jun 18 #Javascript
浅谈Node.js中的定时器
Jun 18 #Javascript
浅析AngularJS中的生命周期和延迟处理
Jun 18 #Javascript
Node.js事件驱动
Jun 18 #Javascript
You might like
《PHP编程最快明白》第六讲:Mysql数据库操作
2010/11/01 PHP
PHP中Session可能会引起并发问题
2015/06/26 PHP
thinkphp3.2.3版本的数据库增删改查实现代码
2016/09/22 PHP
JavaScript 事件参考手册
2008/12/24 Javascript
一个简单的js动画效果代码
2010/07/20 Javascript
table对象中的insertRow与deleteRow使用示例
2014/01/26 Javascript
关于页面嵌入swf覆盖div层的问题的解决方法
2014/02/11 Javascript
JS嵌套函数调用上下文的问题解决
2014/03/26 Javascript
jquery实现多屏多图焦点图切换特效的方法
2015/05/04 Javascript
js实现select下拉框菜单
2015/12/08 Javascript
node.js cookie-parser 中间件介绍
2016/06/06 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
String字符串截取的四种方式总结
2016/11/28 Javascript
Vue精简版风格指南(推荐)
2018/01/30 Javascript
微信小程序wx:for和wx:for-item的用法详解
2018/04/01 Javascript
[02:43]DOTA2英雄基础教程 德鲁伊
2014/01/13 DOTA
[02:19]2014DOTA2国际邀请赛 专访820少年们一起去追梦吧
2014/07/14 DOTA
Python selenium文件上传方法汇总
2020/11/19 Python
Python使用asyncio包处理并发详解
2017/09/09 Python
python得到qq句柄,并显示在前台的方法
2018/10/14 Python
使用Python 正则匹配两个特定字符之间的字符方法
2018/12/24 Python
Django中信号signals的简单使用方法
2019/07/04 Python
python计算二维矩形IOU实例
2020/01/18 Python
在django中form的label和verbose name的区别说明
2020/05/20 Python
css3打造一款漂亮的卡哇伊按钮
2013/03/20 HTML / CSS
纯CSS3制作页面切换效果的实例代码
2019/05/30 HTML / CSS
意大利奢侈品购物网站:Deliberti
2019/10/08 全球购物
使用C#编写创建一个线程的代码
2013/01/22 面试题
会计工作心得体会
2014/01/13 职场文书
就业表自我评价分享
2014/02/06 职场文书
实习报告评语
2014/04/26 职场文书
董事长助理工作职责范本
2014/07/01 职场文书
食品安全汇报材料
2014/08/18 职场文书
单位委托书格式范本
2014/09/29 职场文书
JavaScript控制台的更多功能
2021/04/28 Javascript
Android Studio 计算器开发
2022/05/20 Java/Android