Angularjs过滤器是 angularjs非常棒的特性之一。有朝一日，你可能需要使用自定义过滤器，幸运的是，你找到了这篇博文。

下面显示的是自定义过滤器长什么样子(请注意myfilter):

<tr ng-repeat="friend in friends |myfilter:'param1':'param2':true:'windowScopedFilter'">

我们的自定义过滤器叫做 "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>

创建 AngularJS 自定义过滤器，带自定义参数的更多相关文章

  1. MVC自定义过滤器，自定义Area过滤器，自定义Controller，Action甚至是ViewData过滤器

    实现MVC自定义过滤器,自定义Area过滤器,自定义Controller,Action甚至是ViewData过滤器 MVC开发中几种以AOP方式实现的Filters是非常好用的,默认情况下,我们通过A ...

  2. Django-【template】自定义过滤器和自定义标签

      模板语言内置的过滤器和标签比较少,往往会遇到无法满足需求的情况,所以需要我们来自定义.自定义filter和simple_tag在项目中很常用   a.首先检查settings下面INSTALLED ...

  3. Django 05 自定义过滤器、自定义标签

    Django 05 自定义过滤器.自定义标签 一.自定义过滤器 #1.在项目目录下创建一个python package包 取名为common(这个名字可以自定义) #2.在common目录下创建一个t ...

  4. Flask 自定义过滤器多个参数传入

    非完整HTML文件: <div class="container" style="margin-top:50px;"> <div class= ...

  5. 实现MVC自定义过滤器，自定义Area过滤器，自定义Controller，Action甚至是ViewData过滤器

    MVC开发中几种以AOP方式实现的Filters是非常好用的,默认情况下,我们通过App_Start中的FilterConfig来实现的过滤器注册是全局的,也就是整个应用程序都会使用的,针对单独的Fi ...

  6. django-DIL模板自定义过滤器，自定义标签，自定义包含标签

    自定义过滤器 DTL模板语言生来只是为了方便的展示信息,所以与编程语言相比显得有点薄弱,有时候不能满足我们的需求.因此django提供了一个接口,让开发者能自定义标签和过滤器. 首先,你需要添加一个t ...

  7. Django（自定义过滤器和自定义标签）

    模版是一个用django模版语言标记过的python字符串.模版可以包含模版标签和变量. 模版标签是在一个模版里起作用的标记.比如,一个模版标签可以产生控制结构的内容(if或者for),可以获取数据库 ...

  8. angularJS自定义 过滤器基础

    先写个简单的例子,该过滤器是指定规定的字符串长度: html: <div ng-app="app" ng-controller="ctrl"> &l ...

  9. 自定义模板语言之simple_tag和自定义过滤器

    扩展你的模板系统 一般是扩展模板的tag和filter两个功能.可以用来创建你自己的tag和filter功能库. 创建模板库 分为两步: 1. 首先决定由模板库在哪一个注册的app下放置,你可以放在一 ...

  10. SpringBoot自定义过滤器的两种方式及过滤器执行顺序

    第一种 @WebFilter + @ServletComponentScan 注解 1.首先自定义过滤器 如下自定义过滤器 ReqResFilter 必须实现  javax.servlet.Filte ...

随机推荐

  1. Find and run the whalesay image

    Find and run the whalesay image People all over the world create Docker images. You can find these i ...

  2. ControlTemple样式

    1.TextBox 样式 1.1 style <Window.Resources> <Style x:Key="aa" TargetType="{x:T ...

  3. redis1--redis的介绍

    (1)持久化数据库的缺点平常我们使用的关系型数据库有Mysql.Oracle以及SqlServer等,在开发的过程中,数据通常都是通过Web提供的数据库驱动来链接数据库进行增删改查.那么,我们日常使用 ...

  4. 安装gensim

    安装了一天的gensim,其中因为版本不一致等等各种问题纠结了好久,现记录如下: 正确安装方式: 1. 安装python2.7 2. 下载Python Extension Packages对应版本的n ...

  5. C# List 扩展排序

    using System; using System.Collections.Generic; using System.Linq; using System.Text; namespace Comm ...

  6. android:layout_weight属性的使用方法总结

    原创文章,转载请注明出处http://www.cnblogs.com/baipengzhan/p/6282826.html android:layout_weight属性可以和其他属性配合使用,产生多 ...

  7. mysql 1053错误，无法启动的解决方法

    mysql 1053错误,无法启动的解决方法 windows2003服务器中,服务器重启后Mysql却没有启动,手动启动服务时提示1053错误. 尝试了以下方法,终于解决. 1.在DOS命令行使用 第 ...

  8. mysql读写分离配置，利用mybatis实现，解释为什么dynamicDataSource不行

    之前发布了mysql主从配置的博客,配置完成之后,那么我们肯定要拿主从来做点什么. 我第一想到的就是mysql的读写分离,让读写分离之后可以大大的提供mysql的性能,比单纯用mysql主从做备份好很 ...

  9. eclipse新建workspace使用之前workspace的个性配置

    为使新建的workspace(称作A)的配置,比如主题等等,和之前的workspace(称作B)的配置一样: . 关闭eclipse . 将A中.metadata/.plugins目录下所有文件.文件 ...

  10. RESTful架构3--开发实战

    转自:REST服务开发实战 如果要说什么是REST的话,那最好先从Web(万维网)说起. 什么是Web呢?读者可以查看维基百科的词条(http://zh.wikipedia.org/zh-cn/Web ...