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 弹出窗口中是否显示地址栏的实现代码
Apr 14 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
Jan 16 Javascript
JS动态添加与删除select中的Option对象(示例代码)
Dec 20 Javascript
js限制文本框只能输入数字方法小结
Jun 16 Javascript
Javascript中的getUTCHours()方法使用详解
Jun 10 Javascript
全面解析DOM操作和jQuery实现选项移动操作代码分享
Jun 07 Javascript
BootStrap的select2既可以查询又可以输入的实现代码
Feb 17 Javascript
JavaScript数据结构中栈的应用之表达式求值问题详解
Apr 11 Javascript
JS字符串按逗号和回车分隔的方法
Apr 25 Javascript
JavaScript 值类型和引用类型的初次研究(推荐)
Jul 19 Javascript
JavaScript中 ES6变量的结构赋值
Jul 10 Javascript
JavaScript实现京东放大镜效果
Dec 03 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
基于mysql的bbs设计(四)
2006/10/09 PHP
smarty中先strip_tags过滤html标签后truncate截取文章运用
2010/10/25 PHP
PHP企业级应用之常见缓存技术篇
2011/01/27 PHP
PHP递归调用的小技巧讲解
2013/02/19 PHP
深入php self与$this的详解
2013/06/08 PHP
PHP查询快递信息的方法
2015/03/07 PHP
PHP模板引擎Smarty中的保留变量用法分析
2016/04/11 PHP
php使用get_class_methods()函数获取分类的方法
2016/07/20 PHP
JavaScript判断两种格式的输入日期的正确性的代码
2007/03/25 Javascript
js 获取、清空input type=&quot;file&quot;的值(示例代码)
2013/12/24 Javascript
jQuery避免$符和其他JS库冲突的方法对比
2014/02/20 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
Backbone.js的Hello World程序实例
2015/06/19 Javascript
详解javascript中原始数据类型Null和Undefined
2015/12/17 Javascript
原生js实现可爱糖果数字时间特效
2016/12/30 Javascript
JavaScript实现左侧菜单效果
2017/12/14 Javascript
用npm安装vue和vue-cli,并使用webpack创建项目的方法
2018/09/28 Javascript
js图数据结构处理 迪杰斯特拉算法代码实例
2019/09/11 Javascript
JS求解两数之和算法详解
2020/04/28 Javascript
vue-cli4使用全局less文件中的变量配置操作
2020/10/21 Javascript
[46:14]完美世界DOTA2联赛PWL S3 Magma vs INK ICE 第一场 12.11
2020/12/16 DOTA
Python Sleep休眠函数使用简单实例
2015/02/02 Python
实践Python的爬虫框架Scrapy来抓取豆瓣电影TOP250
2016/01/20 Python
Python中的descriptor描述器简明使用指南
2016/06/02 Python
Python如何实现MySQL实例初始化详解
2017/11/06 Python
python主线程捕获子线程的方法
2018/06/17 Python
安装python及pycharm的教程图解
2019/10/10 Python
django2.2 和 PyMySQL版本兼容问题
2020/02/17 Python
python GUI库图形界面开发之PyQt5控件QTableWidget详细使用方法与属性
2020/02/25 Python
日本索尼音乐商店:Sony Music Shop
2018/07/17 全球购物
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
人民教师求职自荐信
2014/03/12 职场文书
党员国庆节演讲稿范文2014
2014/09/21 职场文书
新郎结婚感言
2015/07/31 职场文书
Go语言-为什么返回值为接口类型,却返回结构体
2021/04/24 Golang
BCL经典机 SONY ICF-5900W电路分析
2022/04/24 无线电