AngularJS另一个特点就是提供了过滤器，可以通过操作UNIX下管道的方式，操作数据结果。

　　通过使用管道，可以便于双向的数据绑定中视图的展现。

　　过滤器在处理过程中，将数据变成新的格式，而且可以使用管道这种链式风格，还能接受附加的参数。

　　实现方式

　　下面看一下如何定义声明一个过滤器，首先依然是要创建我们自己的模块myAppModule

  1. var myAppModule = angular.module("myApp",[]);

　　接下来在模块的基础上，创建过滤器：

  1. myAppModule.filter("reverse",function(){
  2.  
  3. });

　　其中reverse是过滤器的名字，后面跟着过滤器的方法声明，在方法中返回另一个方法：

  1. myAppModule.filter("reverse",function(){
  2.                 return function(input,uppercase){
  3.                     var out = "";
  4.                     for(var i=0 ; i<input.length; i++){
  5.                         out = input.charAt(i)+out;
  6.                     }
  7.                     if(uppercase){
  8.                         out = out.toUpperCase();
  9.                     }
  10.                     return out;
  11.                 }
  12.             });

　　内部返回的方法包含了两个参数，一个是输入的值，就是我们过滤器接受的值。

　　如果想要实现下面的过滤器：

  1. 　　name | reverse

　　则input就是其中name代表的值。

　　后面的参数是可选的，我们这里接受uppercase这个bool值，判断是否要进行大小写转换。

　　内部实现的代码，就没必要解释了。最后返回过滤后的字符串即可。

　　程序样例

  1. <!doctype html>
  2. <html ng-app="myApp">
  3.     <head>
  4.          <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5.          <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  6.     </head>
  7.     <body>
  8.  
  9.         <div ng-controller="myAppCtrl">
  10.             name:{{ name }}<br>
  11.             reverse name:{{ name | reverse }}<br>
  12.             reverse&uppercase name:{{ name | reverse:true }}
  13.         </div>
  14.         <script type="text/javascript">
  15.             var myAppModule = angular.module("myApp",[]);
  16.  
  17.             myAppModule.controller("myAppCtrl",["$scope",function($scope){
  18.                 $scope.name = "xingoo";
  19.             }]);
  20.  
  21.             myAppModule.filter("reverse",function(){
  22.                 return function(input,uppercase){
  23.                     var out = "";
  24.                     for(var i=0 ; i<input.length; i++){
  25.                         out = input.charAt(i)+out;
  26.                     }
  27.                     if(uppercase){
  28.                         out = out.toUpperCase();
  29.                     }
  30.                     return out;
  31.                 }
  32.             });
  33.         </script>
  34.     </body>
  35. </html>

　　运行结果

【AngularJS】—— 9 自定义过滤器的更多相关文章

  1. 关于angularjs 中自定义过滤器

    包子认为,在angularjs中,经常需要用到自定义过滤器,来过滤相应的功能,自定义过滤器非常的简单,我就直接贴代码啦 其中input就是你需要进行操作的对象,,,用法就直接就是 是不是很easy.. ...

  2. AngularJS中自定义过滤器

    AngularJS中为我们提供了一些内置的过滤器,这里列举一些自定义过滤器的场景. 自定义过滤器,不带参赛 //过滤 不带参赛 app.filter('ordinal', function () { ...

  3. AngularJS：自定义过滤器

    表达式:         {{ expression | filter1 | filter2 | ... }}         {{ expression | filterName : paramet ...

  4. AngularJs练习Demo8 自定义过滤器

    @{ Layout = null; } <!DOCTYPE html> <html> <head> <meta name="viewport&quo ...

  5. 创建 AngularJS 自定义过滤器，带自定义参数

    Angularjs过滤器是 angularjs非常棒的特性之一.有朝一日,你可能需要使用自定义过滤器,幸运的是,你找到了这篇博文. 下面显示的是自定义过滤器长什么样子(请注意myfilter): &l ...

  6. AngularJS实现的自定义过滤器简单示例

    本文实例讲述了AngularJS实现的自定义过滤器.分享给大家供大家参考,具体如下: 1.自定义限制字数的过滤器 啥也不说了直接上代码吧 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 ...

  7. angularJS自定义过滤器、服务和指令

    自定义过滤器 mainApp.filter('mayfilter',function(){ return function(input){ (过滤逻辑代码) } });   自定义创建指令 mainA ...

  8. angularJS自定义 过滤器基础

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

  9. angularjs学习第三天笔记（过滤器第二篇---filter过滤器及其自定义过滤器）

    您好,我是一名后端开发工程师,由于工作需要,现在系统的从0开始学习前端js框架之angular,每天把学习的一些心得分享出来,如果有什么说的不对的地方,请多多指正,多多包涵我这个前端菜鸟,欢迎大家的点 ...

  10. angularJs的过滤器扩展及自定义过滤器

    一.过滤器扩展 1.过滤器的组合使用 <!DOCTYPE HTML> <html ng-app="myApp"> <head> <meta ...

随机推荐

  1. C#关闭窗口代码

    if (MessageBox.Show("请您确认是否退出(Y/N)", "系统提示", MessageBoxButtons.YesNo, MessageBox ...

  2. POJ 2823 Sliding Window + 单调队列

    一.概念介绍 1. 双端队列 双端队列是一种线性表,是一种特殊的队列,遵守先进先出的原则.双端队列支持以下4种操作: (1)   从队首删除 (2)   从队尾删除 (3)   从队尾插入 (4)   ...

  3. python中isort的使用

    是一个使import 列表更美观的工具包,官方例子如下: before from my_lib import Object print("Hey") import os from ...

  4. 【Alpha阶段】第一次Scrum例会

    个人任务报告 姓名 昨日已完成任务 明日计划任务 工作困难 岳桐宇 #20 撰写网站用户界面与体验改进方案文档 无 1. 与邓楚云的制定前端工作流程产生冲突,发生了不愉快的情况,最后在整个团队协商的情 ...

  5. python函数（五）

    函数 1.函数基本语法及特性 背景提要 现在老板让你写一个监控程序,监控服务器的系统状况,当cpu＼memory＼disk等指标的使用量超过阀值时即发邮件报警, 你掏空了所有的知识量,写出了以下代码 ...

  6. jQuery知识点总结（第一天）

    整理笔记前的题外话: 我认为互联网的高速发展其中最为主要的一点就是——开源. 开源精神,使得无数的IT爱好者贡献所学,将自己的智慧结晶无偿奉献给大家.后辈的学习者在混沌的互联网世界里,追寻着前辈们留下 ...

  7. POJ 2752Seek the Name, Seek the Fame(next数组妙用 + 既是前缀也是后缀)

    题目链接 题意:求一个字符串中 前缀 和 后缀 相同的长度 分析: 对于一个字符串他自己的长度肯定是可以的.然后如果满足 前缀 和 后缀相等,那个前缀 最后一个字符 一定 和 该字符串最后一个字符相等 ...

  8. JavaWeb---总结(十三)使用Session防止表单重复提交

    在平时开发中,如果网速比较慢的情况下,用户提交表单后,发现服务器半天都没有响应,那么用户可能会以为是自己没有提交表单,就会再点击提交按钮重复提交表单,我们在开发中必须防止表单重复提交. 一.表单重复提 ...

  9. SSH的各个配置文件：

    struts的配置: struts.xml: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE ...

  10. FIFA halts 2026 bids amid scandal 国际足联在丑闻期间停止2026年足球世界杯申请

    FIFA halts 2026 bids amid scandal 国际足联在丑闻期间停止2026年足球世界杯申请 But official insists 2018 Cup will stay in ...