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 相关文章推荐
javascript第一课
Feb 27 Javascript
代码精简的可以实现元素圆角的js函数
Jul 21 Javascript
javascript之typeof、instanceof操作符使用探讨
May 19 Javascript
js 获取radio按钮值的实例
Aug 17 Javascript
jQuery对下拉框,单选框,多选框的操作
Feb 21 Javascript
js调用iframe实现打印页面内容的方法
Mar 04 Javascript
浅谈JavaScript字符集
May 22 Javascript
jQuery实现的导航条切换可显示隐藏
Oct 22 Javascript
javascript和jquery实现用户登录验证
May 04 Javascript
jquery实现无刷新验证码的简单实例
May 19 Javascript
Angular2库初探
Mar 01 Javascript
layui中layer前端组件实现图片显示功能的方法分析
Oct 13 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
怎样去阅读一份php源代码
2009/08/21 PHP
Apache服务器无法使用的解决方法
2013/05/08 PHP
PHP7 foreach() 函数修改
2021/03/09 PHP
在JavaScript里防止事件函数高频触发和高频调用的方法
2014/09/06 Javascript
js实现鼠标经过表格行变色的方法
2015/05/12 Javascript
精通JavaScript的this关键字
2020/05/28 Javascript
jQuery计算文本框字数及限制文本框字数的方法
2016/03/01 Javascript
Easyui Treegrid改变默认图标的方法
2016/04/29 Javascript
javascript执行环境及作用域详解
2016/05/05 Javascript
jqPlot jQuery绘图插件的使用
2016/06/18 Javascript
Node.js connect ECONNREFUSED错误解决办法
2016/09/15 Javascript
AngularJS基于http请求实现下载php生成的excel文件功能示例
2018/01/23 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
2018/07/13 jQuery
webpack多入口多出口的实现方法
2018/08/17 Javascript
解决vue 项目引入字体图标报错、不显示等问题
2018/09/01 Javascript
vue里如何主动销毁keep-alive缓存的组件
2019/03/21 Javascript
在mpvue框架中使用Vant WeappUI组件库的注意事项【推进】
2019/06/09 Javascript
vue 实现走马灯效果
2019/10/28 Javascript
Vue 列表页带参数进详情页的操作(router-link)
2020/11/13 Javascript
[07:55]2014DOTA2 TI正赛第三日 VG上演推进荣耀DKEG告别
2014/07/21 DOTA
[00:36]我的中国心——Serenity vs Fnatic
2018/08/21 DOTA
Django 使用Ajax进行前后台交互的示例讲解
2018/05/28 Python
Django上使用数据可视化利器Bokeh解析
2019/07/31 Python
使用Tkinter制作信息提示框
2020/02/18 Python
django中ImageField的使用详解
2020/12/21 Python
香港连卡佛百货官网:Lane Crawford
2019/09/04 全球购物
结构工程研究生求职信
2013/10/13 职场文书
大学学习生活感言
2014/01/18 职场文书
构建高效课堂实施方案
2014/03/13 职场文书
温馨提示标语
2014/06/26 职场文书
考勤制度通知
2015/04/25 职场文书
钢琴师观后感
2015/06/12 职场文书
2019大学生暑期实习心得总结
2019/08/21 职场文书
导游词之江南园林狮子林
2019/09/16 职场文书
Eclipse+Java+Swing+Mysql实现电影购票系统(详细代码)
2022/01/18 Java/Android
bootstrapv4轮播图去除两侧阴影及线框的方法
2022/02/15 HTML / CSS