使用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 相关文章推荐
JS input文本框禁用右键和复制粘贴功能的代码
Apr 15 Javascript
jquery 选项卡效果 新手代码
Jul 08 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
jQuery中offsetParent()方法用法实例
Jan 19 Javascript
jquery背景跟随鼠标滑动导航
Nov 20 Javascript
jQuery读取XML文件的方法示例
Feb 03 Javascript
详解vue2父组件传递props异步数据到子组件的问题
Jun 29 Javascript
jQuery动态添加li标签并添加属性和绑定事件方法
Feb 24 jQuery
微信小程序实现弹出层效果
May 26 Javascript
Webpack4+Babel7+ES6兼容IE8的实现
Apr 10 Javascript
vue component 中引入less文件报错 Module build failed
Apr 17 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 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验证码类代码( 最新修改,完全定制化! )
2010/12/02 PHP
ThinkPHP中的三大自动简介
2014/08/22 PHP
php+mysql实现简单的增删改查功能
2015/07/13 PHP
日常整理PHP中简单的图形处理(经典)
2015/10/26 PHP
jquery连缀语法如何实现
2012/11/29 Javascript
(跨浏览器基础事件/浏览器检测/判断浏览器)经验代码分享
2013/01/24 Javascript
实现动画效果核心方式的js代码
2013/09/27 Javascript
Javascript 颜色渐变效果的实现代码
2013/10/01 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
javascript实现修改微信分享的标题内容等
2014/12/11 Javascript
JavaScript输出当前时间Unix时间戳的方法
2015/04/06 Javascript
初步认识JavaScript函数库jQuery
2015/06/18 Javascript
JS实现自定义简单网页软键盘效果代码
2015/11/05 Javascript
jQuery插件imgPreviewQs实现上传图片预览
2016/01/15 Javascript
火狐和ie下获取javascript 获取event的方法(推荐)
2016/11/26 Javascript
Vue列表页渲染优化详解
2017/07/24 Javascript
vue使用video.js进行视频播放功能
2019/07/18 Javascript
[51:36]EG vs VP 2018国际邀请赛淘汰赛BO3 第一场 8.24
2018/08/25 DOTA
[04:00]黄浦江畔,再会英雄——完美世界DOTA2 TI9应援视频
2019/07/31 DOTA
Python多线程编程简单介绍
2015/04/13 Python
巧用python和libnmapd,提取Nmap扫描结果
2016/08/23 Python
Python首次安装后运行报错(0xc000007b)的解决方法
2016/10/18 Python
Python单体模式的几种常见实现方法详解
2017/07/28 Python
Python编程实现双链表,栈,队列及二叉树的方法示例
2017/11/01 Python
python中使用%与.format格式化文本方法解析
2017/12/27 Python
python PyTorch参数初始化和Finetune
2018/02/11 Python
Python视频爬虫实现下载头条视频功能示例
2018/05/07 Python
python3.7通过thrift操作hbase的示例代码
2020/01/14 Python
HTML5边玩边学(1)画布实现方法
2010/09/21 HTML / CSS
TripAdvisor土耳其网站:全球知名旅行社区,真实旅客评论
2017/04/17 全球购物
北京银河万佳Java面试题
2012/03/21 面试题
保洁公司服务承诺书
2014/05/28 职场文书
2014年科普工作总结
2014/12/06 职场文书
高性能跳频抗干扰宽带自组网电台
2022/02/18 无线电
Python中time与datetime模块使用方法详解
2022/03/31 Python
JS精髓原型链继承及构造函数继承问题纠正
2022/06/16 Javascript