详解AngularJS中$filter过滤器使用(自定义过滤器)


Posted in Javascript onFebruary 04, 2017

1.内置过滤器

* $filter 过滤器,是angularJs中用来处理数据以更好的方式展示给我用户。比如格式化日期,转换大小写等等。
* 过滤器即有内置过滤器也支持自定义过滤器。内置过滤器很多,可以百度。关键是如何使用:
* 1.在HTML中直接使用内置过滤器
* 2.在js代码中使用内置过滤器
* 3.自定义过滤器
*
* (1)常用内置过滤器
*    number 数字过滤器,可以设置保留数字小数点后几位等
*    date  时间格式化过滤器,可自己设置时间格式
*    filter 过滤的数据一般是数组,数组中的数据可以是对象,字符串等
*    orderBy 排序根据数组中某一个元素的属性排序等
*    lowercase 转换小写
*    uppercase 转换大写
*    limitTo  字符串剪切 使用格式{{被剪切的字符串|limitTo:数值}} 数值绝对值代表要切得字符个数,正代表从头开始切,负值相反。
*
* */

2.自定义过滤器

/*
* 定义格式:
* 模块名称.filter(‘过滤器名字',function(){
*    return function(被过滤数据,条件1,条件2.。。。){
*    //过滤操作
*    }
* });
* */

    套用上面的格式定义两个简单的自定义过滤器一个带条件的,一个不带条件的。

(1)【不带条件】,功能:固定转换(有时候项目中会遇到角色代号,门店编码什么的,但是显示的时候要显示对应中文,比如字段code:101代表老板

    这时候像这种code值比较多,那就用过滤器比较好。)

myApp.filter("ChangeCode",function () {
  return function (inputData) {
    var changed = "";
    switch (inputData){
      case '101':changed = "老板";break;
      case '102':changed = "经理";break;
      case '103':changed = "员工";break;
    }
    return changed;
  }
});
/*完成,说一下使用场景(就这个过滤器的功能)和方式。
* 场景:服务器返回的数据中有个字段code,直接放标签里<div>{{data.code}}</div>,会显示code值而不是code值对应的职称,这时候就可以用这个专门
*    针对这个转换的自定义过滤器
* 使用方式:
*      (1)HTML中:<div>{{data.code | ChangeCode}}</div>//跟内置过滤器一样的方式
*      (2)js中:变量 = $filter("ChangeCode")(被过滤的code数据)//一样的调用方式
*      
* */

(2)【带条件】,功能过滤掉一组数组中某个字段值为某个值的数据,比如这里定义一个过滤掉所有年龄为某个值的过滤器。参数就是年龄

myApp.filter("deleteByAge",function () {
  return function (input,byAge,age) {
    var array = [];
    for(var i=0;i<input.length;i++){
      if(input[i][byAge]!=age){
        array.push(input[i]);
      }
    }
    return array;
  }
})
/*
* 处理一组数据的时候一般很少用在HTML当中,带条件的自定义过滤器是根据年龄值,也可以根据数组元素中的任意一个属性值进行删除过滤。
* 使用方式:变量 = $filter("deleteByAge")(数组,“属性名称”,属性值);
* */

【总结内置过滤器的使用方式】

 (1)在HTML中一般格式为:  {{被过滤的数据 | 过滤器名称:条件1:条件2.。。。}}    ;过滤条件之间用‘:'隔开.

 (2)在代码中一般格式为:  变量 = $filter("过滤器名称")(被过滤数据,过滤条件1,过滤条件2,。。。。。。)

【自定义过滤器】

 (1)定义格式:   

model.filter(filterName,function(){
       return function(参数1,参数2,参数3.。。。。参数N){
         //过滤器处理部分
        }
      })

      model:模块名称

      filterName: 过滤器名称

      参数1:被过滤的数据

      参数2:一般为过滤条件,可以有多个,后面的参数3一直到参数N都是,根据需要添加。

以上所述是小编给大家介绍的详解AngularJS中$filter过滤器使用(自定义过滤器),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
我的javascript 函数链之演变
Apr 07 Javascript
JavaScript实现的一个计算数字步数的算法分享
Dec 06 Javascript
javascript继承的六大模式小结
Apr 13 Javascript
基于js实现投票的实例代码
Aug 04 Javascript
JS+CSS实现表格高亮的方法
Aug 05 Javascript
javascript密码强度校验代码(两种方法)
Aug 10 Javascript
JSON+Jquery省市区三级联动
Jan 13 Javascript
jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)
Jun 07 Javascript
JavaScript语言精粹经典实例(整理篇)
Jun 07 Javascript
基于vue手写tree插件的那点事儿
Aug 20 Javascript
小程序如何获取多个formId实现详解
Sep 20 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
js常用DOM方法详解
Feb 04 #Javascript
JavaScript数组操作详解
Feb 04 #Javascript
jQuery使用方法
Feb 04 #Javascript
touch.js 拖动、缩放、旋转 (鼠标手势)功能代码
Feb 04 #Javascript
jQuery插件autocomplete使用详解
Feb 04 #Javascript
d3.js中冷门却实用的内置函数总结
Feb 04 #Javascript
原生js开发的日历插件
Feb 04 #Javascript
You might like
php 多线程上下文中安全写文件实现代码
2009/12/28 PHP
dedecms函数分享之获取某一栏目所有子栏目
2014/05/19 PHP
Laravel构建即时应用的一种实现方法详解
2017/08/31 PHP
PHP goto语句用法实例
2019/08/06 PHP
JS 控制小数位数的实现代码
2011/08/02 Javascript
jquery中使用$(#form).submit()重写提交表单无效原因分析及解决
2013/03/25 Javascript
JQuery设置和去除disabled属性的5种方法总结
2013/05/16 Javascript
JSCode all of Brower 全局屏蔽网页右键功能 具体实现
2013/06/05 Javascript
javascript实现的HashMap类代码
2014/06/27 Javascript
js全选实现和判断是否有复选框选中的方法
2015/02/17 Javascript
js面向对象之常见创建对象的几种方式(工厂模式、构造函数模式、原型模式)
2015/11/09 Javascript
js与applet相互调用的方法
2016/06/22 Javascript
jQuery学习之DOM节点的插入方法总结
2017/01/22 Javascript
实例分析nodejs模块xml2js解析xml过程中遇到的坑
2017/03/18 NodeJs
记录微信小程序 height: calc(xx - xx);无效问题
2019/12/30 Javascript
使用vue实现一个电子签名组件的示例代码
2020/01/06 Javascript
python读写json文件的简单实现
2017/04/11 Python
Python使用numpy模块实现矩阵和列表的连接操作方法
2019/06/26 Python
Python面向对象封装操作案例详解 II
2020/01/02 Python
Python2 与Python3的版本区别实例分析
2020/03/30 Python
实例代码讲解Python 线程池
2020/08/24 Python
利用Python将图片中扭曲矩形的复原
2020/09/07 Python
Python中random模块常用方法的使用教程
2020/10/04 Python
松下电器美国官方商店:Panasonic美国
2016/10/14 全球购物
简历的自我评价范文
2014/02/04 职场文书
欢送退休感言
2014/02/08 职场文书
晚归检讨书
2014/02/19 职场文书
港澳通行证委托书怎么写
2014/08/02 职场文书
医院党员公开承诺书
2014/08/30 职场文书
公证委托书格式
2014/09/13 职场文书
乡镇领导班子四风对照检查材料
2014/09/27 职场文书
教师批评与自我批评材料
2014/10/16 职场文书
大连导游词
2015/02/12 职场文书
小学班主任工作总结2015
2015/04/07 职场文书
详解Java实践之抽象工厂模式
2021/06/18 Java/Android
Nginx的基本概念和原理
2022/03/21 Servers