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 相关文章推荐
IE6弹出“已终止操作”的解决办法
Nov 27 Javascript
js中document.getElementByid、document.all和document.layers区分介绍
Dec 08 Javascript
jquery弹出关闭遮罩层实例
Aug 06 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
Dec 05 Javascript
js放到head中失效的原因与解决方法
Mar 07 Javascript
详解angular中通过$location获取路径(参数)的写法
Mar 21 Javascript
使用vux实现上拉刷新功能遇到的坑
Feb 08 Javascript
详解Nuxt.js Vue服务端渲染摸索
Feb 08 Javascript
微信小程序如何调用json数据接口并解析
Jun 29 Javascript
单线程JavaScript实现异步过程详解
May 19 Javascript
Vue-Element-Admin集成自己的接口实现登录跳转
Jun 23 Vue.js
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表单提交问题的解决方法
2011/04/12 PHP
php创建和删除目录函数介绍和递归删除目录函数分享
2014/11/18 PHP
记录一次排查PHP脚本执行卡住的问题
2016/12/27 PHP
用js实现随机返回数组的一个元素
2007/08/13 Javascript
学习ExtJS fit布局使用说明
2009/10/08 Javascript
ymPrompt的doHandler方法来实现获取子窗口返回值的方法
2010/06/25 Javascript
javascript根据时间生成m位随机数最大13位
2014/10/30 Javascript
Javascript中innerHTML用法实例分析
2015/01/12 Javascript
jQuery实现列表的全选功能
2015/03/18 Javascript
jQuery实现鼠标滑过链接控制图片的滑动展开与隐藏效果
2015/10/28 Javascript
学习Angular中作用域需要注意的坑
2016/08/17 Javascript
vue.js选中动态绑定的radio的指定项
2017/06/02 Javascript
JS函数节流和防抖之间的区分和实现详解
2019/01/11 Javascript
js 对象使用的小技巧实例分析
2019/11/08 Javascript
vue实现打地鼠小游戏
2020/08/21 Javascript
如何阻止移动端浏览器点击图片浏览
2020/08/29 Javascript
Vue使用v-viewer实现图片预览
2020/10/21 Javascript
微信小程序canvas动态时钟
2020/10/22 Javascript
微信小程序实现下拉加载更多商品
2020/12/29 Javascript
详解Python中的type()方法的使用
2015/05/21 Python
在centos7中分布式部署pyspider
2017/05/03 Python
[原创]Python入门教程5. 字典基本操作【定义、运算、常用函数】
2018/11/01 Python
Python学习工具jupyter notebook安装及用法解析
2020/10/23 Python
pycharm 使用tab跳出正在编辑的括号(){}{}等问题
2021/02/26 Python
Trip.com香港网站:Ctrip携程旗下,全球最大的网上旅游社之一
2016/08/01 全球购物
ECCO爱步美国官网:来自丹麦的鞋履品牌
2016/11/23 全球购物
教师开学感言
2014/02/14 职场文书
研究生毕业自我鉴定范文
2014/03/27 职场文书
公司合作协议书范本
2014/04/18 职场文书
酒店周年庆活动方案
2014/08/21 职场文书
升国旗演讲稿
2014/09/05 职场文书
报效祖国演讲稿
2014/09/15 职场文书
群众路线教育实践活动实施方案
2014/10/31 职场文书
2015年学校政教处工作总结
2015/05/26 职场文书
80行代码写一个Webpack插件并发布到npm
2021/05/24 Javascript
JS数组去重详情
2021/11/07 Javascript