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队列控制方法详解queue()/dequeue()/clearQueue()
Dec 02 Javascript
解决遍历时Array.indexOf产生的性能问题
Jul 03 Javascript
JavaScript判断是否为数组的3种方法及效率比较
Apr 01 Javascript
JavaScript实现的背景自动变色代码
Oct 17 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(1)
Feb 20 Javascript
详解Vue用自定义指令完成一个下拉菜单(select组件)
Oct 31 Javascript
Vue可自定义tab组件用法实例
Oct 24 Javascript
vue input标签通用指令校验的实现
Nov 05 Javascript
微信小程序如何实现点击图片放大功能
Jan 21 Javascript
vue项目启动出现cannot GET /服务错误的解决方法
Apr 26 Javascript
JS 设计模式之:单例模式定义与实现方法浅析
May 06 Javascript
手写Vue2.0 数据劫持的示例
Mar 04 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 echo 输出字符串函数详解
2010/05/13 PHP
Drupal7中常用的数据库操作实例
2014/03/02 PHP
php实现水仙花数的4个示例分享
2014/04/08 PHP
Exjs 入门篇
2010/04/07 Javascript
JQuery开发的数独游戏代码
2010/10/29 Javascript
Js 冒泡事件阻止实现代码
2013/01/27 Javascript
基于jquery扩展漂亮的CheckBox(自己编写)
2013/11/19 Javascript
js打开新窗口方法整理
2014/02/17 Javascript
jQuery操作select下拉框的text值和value值的方法
2014/05/31 Javascript
Javascript的&amp;&amp;和||的另类用法
2014/07/23 Javascript
Js 正则表达式知识汇总
2014/12/02 Javascript
全面解析Bootstrap表单使用方法(表单样式)
2015/11/24 Javascript
jquery form表单获取内容以及绑定数据
2016/02/24 Javascript
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
2016/05/19 Javascript
bootstrap快速制作后台界面
2016/12/05 Javascript
vue router-link传参以及参数的使用实例
2017/11/10 Javascript
微信小程序按钮去除边框线分享页面功能
2018/08/27 Javascript
React通过redux-persist持久化数据存储的方法示例
2019/02/14 Javascript
Python中optparser库用法实例详解
2018/01/26 Python
python3 对list中每个元素进行处理的方法
2018/06/29 Python
在linux系统下安装python librtmp包的实现方法
2019/07/22 Python
python爬取网易云音乐热歌榜实例代码
2020/08/07 Python
python合并多个excel文件的示例
2020/09/23 Python
pycharm 的Structure界面设置操作
2021/02/05 Python
小程序瀑布流解决左右两边高度差距过大的问题
2019/02/20 HTML / CSS
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
Java中有几种类型的流?JDK为每种类型的流提供了一些抽象类以供继承,请说出他们分别是哪些类
2012/02/06 面试题
中学教师请假制度
2014/02/03 职场文书
善意的谎言事例
2014/02/15 职场文书
企业宣传口号
2014/06/12 职场文书
房地产端午节活动方案
2014/08/24 职场文书
科学发展观活动总结
2014/08/28 职场文书
行政前台岗位职责
2015/04/16 职场文书
2015年村计划生育工作总结
2015/04/28 职场文书
歌剧魅影观后感
2015/06/05 职场文书
教师学习心得体会范文
2016/01/21 职场文书