使用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 相关文章推荐
javascript div 弹出可拖动窗口
Feb 26 Javascript
JavaScript 注册事件代码
Jan 27 Javascript
jQuery EasyUI API 中文文档 - Documentation 文档
Sep 29 Javascript
jQuery Deferred和Promise创建响应式应用程序详细介绍
Mar 05 Javascript
js图片向右一张张滚动效果实例代码
Nov 23 Javascript
vue+axios实现登录拦截的实例代码
May 22 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
Vue.js页面中有多个input搜索框如何实现防抖操作
Nov 04 Javascript
vue a标签点击实现赋值方式
Sep 07 Javascript
详解Vue3 Teleport 的实践及原理
Dec 02 Vue.js
vue 页面跳转的实现方式
Jan 12 Vue.js
VUE使用draggable实现组件拖拽
Apr 06 Vue.js
深入讲解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
简单介绍下 PHP5 中引入的 MYSQLI的用途
2007/03/19 PHP
Linux系统下使用XHProf和XHGui分析PHP运行性能
2015/12/08 PHP
PHP-FPM实现性能优化
2016/03/31 PHP
PHP数组的定义、初始化和数组元素的显示实现代码
2016/11/05 PHP
php导出csv文件,可导出前导0实例代码
2016/11/16 PHP
PHP实现的简单在线计算器功能示例
2017/08/02 PHP
jQuery Mobile页面跳转后未加载外部JS原因分析及解决
2013/03/18 Javascript
12行javascript代码绘制一个八卦图
2015/04/02 Javascript
javascript数据结构之二叉搜索树实现方法
2015/11/25 Javascript
Bootstrap选项卡动态切换效果
2016/11/28 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
2017/01/11 Javascript
借助node实战JSONP跨域实例
2017/03/30 Javascript
vue+ElementUI实现订单页动态添加产品数据效果实例代码
2017/07/13 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
webpack引入eslint配置详解
2018/01/22 Javascript
微信内置浏览器图片查看器的代码实例
2019/10/08 Javascript
JSON获取属性值方法代码实例
2020/06/30 Javascript
vue实现点击出现操作弹出框的示例
2020/11/05 Javascript
Python实现两款计算器功能示例
2017/12/19 Python
Python读取Word(.docx)正文信息的方法
2018/03/15 Python
在python中将字符串转为json对象并取值的方法
2018/12/31 Python
在python3中pyqt5和mayavi不兼容问题的解决方法
2019/01/08 Python
Python facenet进行人脸识别测试过程解析
2019/08/16 Python
Keras在训练期间可视化训练误差和测试误差实例
2020/06/16 Python
python3.4中清屏的处理方法
2020/07/06 Python
python opencv图像处理(素描、怀旧、光照、流年、滤镜 原理及实现)
2020/12/10 Python
奇怪的鱼:Weird Fish
2018/03/18 全球购物
迪卡侬波兰体育用品商店:Decathlon波兰
2020/03/31 全球购物
银行实习生自我鉴定范文
2013/09/19 职场文书
2013年研究生毕业感言
2014/02/06 职场文书
医药营销个人求职信
2014/04/12 职场文书
汉语言文学专业自荐信
2014/06/11 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
2015年个人自我剖析材料
2014/12/29 职场文书
余世维讲座观后感
2015/06/11 职场文书
公司开业的祝贺语大全(60条)
2019/07/05 职场文书