AngularJS 自定义过滤器详解及实例代码


Posted in Javascript onSeptember 14, 2016

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

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

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

实现方式

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

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

接下来在模块的基础上,创建过滤器:

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

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

myAppModule.filter("reverse",function(){
        return function(input,uppercase){
          var out = "";
          for(var i=0 ; i<input.length; i++){
            out = input.charAt(i)+out;
          }
          if(uppercase){
            out = out.toUpperCase();
          }
          return out;
        }
      });

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

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

name | reverse

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

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

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

  程序样例

<!doctype html>
<html ng-app="myApp">
  <head>
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <script src="http://apps.bdimg.com/libs/angular.js/1.2.16/angular.min.js"></script>
  </head>
  <body>

    <div ng-controller="myAppCtrl">
      name:{{ name }}<br>
      reverse name:{{ name | reverse }}<br>
      reverse&uppercase name:{{ name | reverse:true }}
    </div>
    <script type="text/javascript">
      var myAppModule = angular.module("myApp",[]);

      myAppModule.controller("myAppCtrl",["$scope",function($scope){
        $scope.name = "xingoo";
      }]);

      myAppModule.filter("reverse",function(){
        return function(input,uppercase){
          var out = "";
          for(var i=0 ; i<input.length; i++){
            out = input.charAt(i)+out;
          }
          if(uppercase){
            out = out.toUpperCase();
          }
          return out;
        }
      });
    </script>
  </body>
</html>

运行结果

AngularJS 自定义过滤器详解及实例代码

以上就是对AngularJS 自定义过滤器 的资料整理,后续继续补充相关资料,谢谢大家对本站的支持!

Javascript 相关文章推荐
JQuery 绑定select标签的onchange事件,弹出选择的值,并实现跳转、传参
Jan 06 Javascript
jquery 实现checkbox全选,反选,全不选等功能代码(奇数)
Oct 24 Javascript
js判断ie版本号的简单实现代码
Mar 05 Javascript
jQuery的animate函数学习记录
Aug 08 Javascript
jQuery中(function($){})(jQuery)详解
Jul 15 Javascript
javascript数组随机排序实例分析
Jul 22 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
Aug 29 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
css配合JavaScript实现tab标签切换效果
Oct 11 Javascript
一个因@click.stop引发的bug的解决
Jan 08 Javascript
bootstrap 日期控件 datepicker被弹出框dialog覆盖的解决办法
Jul 09 Javascript
element form 校验数组每一项实例代码
Oct 10 Javascript
AngularJS 中的Promise --- $q服务详解
Sep 14 #Javascript
AngularJS bootstrap启动详解及实例代码
Sep 14 #Javascript
AngularJS equal比较对象实例详解
Sep 14 #Javascript
AngularJS API之copy深拷贝详解及实例
Sep 14 #Javascript
AngularJS $injector 依赖注入详解
Sep 14 #Javascript
详解XMLHttpRequest(二)响应属性、二进制数据、监测上传下载进度
Sep 14 #Javascript
详解XMLHttpRequest(一)同步请求和异步请求
Sep 14 #Javascript
You might like
收音机鉴频器对声音的影响和频偏分析
2021/03/02 无线电
ajax+php打造进度条 readyState各状态
2010/03/20 PHP
php常用Output和ptions/Info函数集介绍
2013/06/19 PHP
Thinkphp中import的几个用法详细介绍
2014/07/02 PHP
如何在Laravel5.8中正确地应用Repository设计模式
2019/11/26 PHP
phpstorm激活码2020附使用详细教程
2020/09/25 PHP
javascript 页面只自动刷新一次
2009/07/10 Javascript
关于IE、Firefox、Opera页面呈现异同 写脚本很痛苦
2009/08/28 Javascript
JavaScript 函数参数是传值(byVal)还是传址(byRef) 分享
2013/07/02 Javascript
jquery获取复选框被选中的值
2014/03/22 Javascript
自制微信公众号一键排版工具
2016/09/22 Javascript
使用bootstrap实现多窗口和拖动效果
2016/09/22 Javascript
Javascript实现图片懒加载插件的方法
2016/10/20 Javascript
JavaScript实现的微信二维码图片生成器的示例
2016/10/26 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
在React中如何优雅的处理事件响应详解
2017/07/24 Javascript
浅谈react前后端同构渲染
2017/09/20 Javascript
详解Vue如何支持JSX语法
2017/11/10 Javascript
超详细动手搭建一个VuePress 站点及开启PWA与自动部署的方法
2019/01/27 Javascript
各个系统下的Python解释器相关安装方法
2015/10/12 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
python3解析库BeautifulSoup4的安装配置与基本用法
2018/06/26 Python
python类的实例化问题解决
2019/08/31 Python
python 实现将Numpy数组保存为图像
2020/01/09 Python
python 使用cx-freeze打包程序的实现
2020/03/14 Python
python将logging模块封装成单独模块并实现动态切换Level方式
2020/05/12 Python
Kusmi茶美国官网:优质散叶茶和茶包
2019/10/13 全球购物
牵手50香港:专为黄金岁月的单身人士而设的交友网站
2020/08/14 全球购物
Java面试题及答案
2012/09/08 面试题
Unix如何添加新的用户
2014/08/20 面试题
教师评优事迹材料
2014/01/10 职场文书
《三峡》教学反思
2014/03/01 职场文书
晨会主持词
2014/03/17 职场文书
节能减耗标语
2014/06/21 职场文书
母婴行业实体、电商模式全面解析
2019/08/01 职场文书
教你使用Pandas直接核算Excel中快递费用
2021/05/12 Python