使用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 相关文章推荐
判断控件是否已加载完成的代码
Feb 24 Javascript
分享两个手机访问pc网站自动跳转手机端网站代码
Dec 24 Javascript
Jquery on方法绑定事件后执行多次的解决方法
Jun 02 Javascript
jQuery实现每隔几条元素增加1条线的方法
Jun 27 Javascript
Bootstrap和Angularjs配合自制弹框的实例代码
Aug 24 Javascript
使用JavaScript实现表格编辑器(实例讲解)
Aug 02 Javascript
使用 Node.js 开发资讯爬虫流程
Jan 07 Javascript
浅谈vuepress 踩坑记
Apr 18 Javascript
产制造追溯系统之通过微信小程序实现移动端报表平台
Jun 03 Javascript
ES6中定义类和对象的方法示例
Jul 31 Javascript
Element MessageBox弹框的具体使用
Jul 27 Javascript
js实现复制粘贴的两种方法
Dec 04 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获取URL中带#号等特殊符号参数的解决方法
2014/09/02 PHP
PHP实现批量重命名某个文件夹下所有文件的方法
2017/09/04 PHP
ThinkPHP实现转换数据库查询结果数据到对应类型的方法
2017/11/16 PHP
javascript实现划词标记+划词搜索功能
2007/03/06 Javascript
js null undefined 空区别说明
2010/06/13 Javascript
javascript学习笔记(二十) 获得和设置元素的特性(属性)
2012/06/20 Javascript
nodejs创建web服务器之hello world程序
2015/08/20 NodeJs
深入学习JavaScript对象
2015/10/13 Javascript
浅析jQuery Mobile的初始化事件
2015/12/03 Javascript
灵活的理解JavaScript中的this指向
2016/02/25 Javascript
一道优雅面试题分析js中fn()和return fn()的区别
2016/07/05 Javascript
Vue中添加过渡效果的方法
2017/03/16 Javascript
浅谈vue-cli 3.0.x 初体验
2018/04/11 Javascript
微信小程序 scroll-view 水平滚动实现过程解析
2019/10/12 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
JS+HTML5本地存储Localstorage实现注册登录及验证功能示例
2020/02/10 Javascript
[20:21]《一刀刀一天》第十六期:TI国际邀请赛正式打响,总奖金超过550万
2014/05/23 DOTA
python实现向ppt文件里插入新幻灯片页面的方法
2015/04/28 Python
使用Python写CUDA程序的方法
2017/03/27 Python
Windows和Linux下Python输出彩色文字的方法教程
2017/05/02 Python
Python实现句子翻译功能
2017/11/14 Python
python批量复制图片到另一个文件夹
2018/09/17 Python
Python supervisor强大的进程管理工具的使用
2019/04/24 Python
python经典趣味24点游戏程序设计
2019/07/26 Python
python实现电子词典
2020/03/03 Python
零基础学Python之前需要学c语言吗
2020/07/21 Python
使用html2canvas.js实现页面截图并显示或上传的示例代码
2018/12/18 HTML / CSS
荷兰皇家航空公司官方网站:KLM Royal Dutch Airlines
2017/12/07 全球购物
全球销量第一生发产品:Viviscal
2017/12/21 全球购物
巴塞罗那观光通票:Barcelona Pass
2019/10/30 全球购物
求职信格式范本
2013/11/15 职场文书
班主任评语大全
2014/04/26 职场文书
单位绩效考核方案
2014/05/11 职场文书
学校校庆演讲稿
2014/05/22 职场文书
个人对照检查剖析材料
2014/10/13 职场文书
公司内部升职自荐信
2015/03/27 职场文书