使用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 相关文章推荐
jQuery制作仿腾讯web qq用户体验桌面
Aug 20 Javascript
javascript阻止浏览器后退事件防止误操作清空表单
Nov 22 Javascript
js的image onload事件使用遇到的问题
Jul 15 Javascript
JS实现alert中显示换行的方法
Dec 17 Javascript
深入浅析Bootstrap列表组组件
May 03 Javascript
详解Vue-基本标签和自定义控件
Mar 24 Javascript
纯JS实现简单的日历
Jun 26 Javascript
axios发送post请求,提交图片类型表单数据方法
Mar 16 Javascript
前后端如何实现登录token拦截校验详解
Sep 03 Javascript
JavaScript模板引擎应用场景及实现原理详解
Dec 14 Javascript
vue项目中锚点定位替代方式
Nov 13 Javascript
js实现带搜索功能的下拉框
Jan 11 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下防止单引号,双引号在接受页面转义的设置方法
2008/09/25 PHP
php中引用符号(&amp;)的使用详解
2013/11/13 PHP
js png图片(有含有透明)在IE6中为什么不透明了
2010/02/07 Javascript
js确认删除对话框适用于a标签及submit
2014/07/10 Javascript
node.js开机自启动脚本文件
2014/12/24 Javascript
javascript简单实现滑动菜单效果的方法
2015/07/27 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
Vuex利用state保存新闻数据实例
2017/06/28 Javascript
JS 学习总结之正则表达式的懒惰性和贪婪性
2017/07/03 Javascript
Vue实现带进度条的文件拖动上传功能
2018/02/23 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
JavaScript求一个数组中重复出现次数最多的元素及其下标位置示例
2018/07/23 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
JavaScript组合设计模式--改进引入案例分析
2020/05/23 Javascript
[52:15]2014 DOTA2国际邀请赛中国区预选赛5.21 HGT VS LGD-GAMING
2014/05/23 DOTA
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
[02:15]你好,这就是DOTA!
2015/08/05 DOTA
python实现批量改文件名称的方法
2015/05/25 Python
Python保存MongoDB上的文件到本地的方法
2016/03/16 Python
Python实现二分查找与bisect模块详解
2017/01/13 Python
Python操作SQLite数据库的方法详解【导入,创建,游标,增删改查等】
2017/07/11 Python
Python实现在某个数组中查找一个值的算法示例
2018/06/27 Python
python ChainMap 合并字典的实现步骤
2019/06/11 Python
Python高级编程之消息队列(Queue)与进程池(Pool)实例详解
2019/11/01 Python
PyCharm取消波浪线、下划线和中划线的实现
2020/03/03 Python
python3代码输出嵌套式对象实例详解
2020/12/03 Python
pip install命令安装扩展库整理
2021/03/02 Python
深入解析HTML5的IndexedDB索引数据库
2015/09/14 HTML / CSS
英国绿色商店:Natural Collection
2019/05/03 全球购物
Java和Javasciprt的区别
2012/09/02 面试题
触发器(trigger)的功能都有哪些?写出一个触发器的例子
2012/09/17 面试题
语文教育专业应届生求职信
2013/11/23 职场文书
难忘的一天教学反思
2014/04/30 职场文书
交心谈心活动总结
2015/05/11 职场文书
CKAD认证中部署k8s并配置Calico插件
2022/03/31 Servers
Java使用HttpClient实现文件下载
2022/08/14 Java/Android