使用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的一种模块模式
Mar 22 Javascript
JS URL传中文参数引发的乱码问题
Sep 02 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
Feb 06 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
Jquery选择器中使用变量实现动态选择例子
Jul 25 Javascript
使用requestAnimationFrame实现js动画性能好
Aug 06 Javascript
基于JavaScript创建动态Dom
Dec 08 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
jQuery 判断元素整理汇总
Feb 28 Javascript
解决vue-cli脚手架打包后vendor文件过大的问题
Sep 27 Javascript
微信小程序实现两边小中间大的轮播效果的示例代码
Dec 07 Javascript
JS实现横向轮播图(初级版)
Jun 24 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数据导出知识点
2018/02/17 PHP
使用闭包对setTimeout进行简单封装避免出错
2013/07/10 Javascript
JS+flash实现chrome和ie浏览器下同时可以复制粘贴
2013/09/22 Javascript
js清理Word格式示例代码
2014/02/13 Javascript
jquery实现的V字形显示效果代码
2015/10/27 Javascript
js添加绑定事件的方法
2016/05/15 Javascript
ui组件之input多选下拉实现方法(带有搜索功能)
2016/07/14 Javascript
JavaScript面向对象编写购物车功能
2016/08/19 Javascript
JavaScript Uploadify文件上传实例
2017/02/28 Javascript
最通俗易懂的javascript变量提升详解
2017/08/05 Javascript
jquery动态添加带有样式的HTML标签元素方法
2018/02/24 jQuery
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
通过vue写一个瀑布流插件代码实例
2019/09/07 Javascript
AJAX XMLHttpRequest对象创建使用详解
2020/08/20 Javascript
理解python多线程(python多线程简明教程)
2014/06/09 Python
Python查找函数f(x)=0根的解决方法
2015/05/07 Python
Python实现动态图解析、合成与倒放
2018/01/18 Python
python3.x实现发送邮件功能
2018/05/22 Python
Python多继承顺序实例分析
2018/05/26 Python
CentOS7下python3.7.0安装教程
2018/07/30 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
Python字典添加,删除,查询等相关操作方法详解
2020/02/07 Python
python 爬虫爬取京东ps4售卖情况
2020/12/18 Python
纯css3制作煽动翅膀的蝴蝶的示例
2018/04/23 HTML / CSS
HTML5新增的Css选择器、伪类介绍
2013/08/07 HTML / CSS
日本运动品牌美津浓官方购物网站:MIZUNO SHOP
2016/08/21 全球购物
Grow Gorgeous美国官网:只要八天,体验唤醒毛囊后新生的茂密秀发
2018/06/04 全球购物
广告学专业应届生求职信
2013/10/01 职场文书
先进党支部事迹材料
2014/01/13 职场文书
信息专业大学生自我评价分享
2014/01/17 职场文书
模特职业生涯规划范文
2014/02/26 职场文书
对照检查剖析材料
2014/09/30 职场文书
淘宝客服专员岗位职责
2015/04/07 职场文书
Python爬取某拍短视频
2021/06/11 Python