详解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 相关文章推荐
jQuery 定时局部刷新(setInterval)
Nov 19 Javascript
js+数组实现网页上显示时间/星期几的实用方法
Jan 18 Javascript
正负小数点后两位浮点数实现原理及代码
Sep 06 Javascript
jquery-syntax动态语法着色示例代码
May 14 Javascript
JavaScript中消除闭包的一般方法介绍
Mar 16 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
jQuery实现导航回弹效果
Feb 27 Javascript
原生JavaScrpit中异步请求Ajax实现方法
Nov 03 Javascript
基于JavaScript 性能优化技巧心得(分享)
Dec 11 Javascript
Vue CLI3 开启gzip压缩文件的方式
Sep 30 Javascript
vue-week-picker实现支持按周切换的日历
Jun 26 Javascript
详解搭建一个vue-cli的移动端H5开发模板
Jan 17 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
晶体管单管来复再生式收音机
2021/03/02 无线电
php中的注释、变量、数组、常量、函数应用介绍
2012/11/16 PHP
PHP获取数组最后一个值的2种方法
2015/01/21 PHP
PHP新特性详解之命名空间、性状与生成器
2017/07/18 PHP
Laravel (Lumen) 解决JWT-Auth刷新token的问题
2019/10/24 PHP
超清晰的document对象详解
2007/02/27 Javascript
jquery中$.post()方法的简单实例
2014/02/04 Javascript
javascript随机之洗牌算法深入分析
2014/06/07 Javascript
js获取UserControl内容为拼html时提供方便
2014/11/02 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
javascript中对Date类型的常用操作小结
2016/05/19 Javascript
微信小程序 绘图之饼图实现
2016/10/24 Javascript
谈谈vue中mixin的一点理解
2017/12/12 Javascript
vue返回上一页面时回到原先滚动的位置的方法
2018/12/20 Javascript
jQuery实现二级导航菜单的示例
2020/09/30 jQuery
antd多选下拉框一行展示的实现方式
2020/10/31 Javascript
[01:00:14]2018DOTA2亚洲邀请赛 4.6 淘汰赛 VP vs TNC 第三场
2018/04/10 DOTA
Python使用win32com实现的模拟浏览器功能示例
2017/07/13 Python
详解Python实现多进程异步事件驱动引擎
2017/08/25 Python
利用python打开摄像头及颜色检测方法
2018/08/03 Python
Django中数据库的数据关系:一对一,一对多,多对多
2018/10/21 Python
Python深拷贝与浅拷贝用法实例分析
2019/05/05 Python
Python多线程threading模块用法实例分析
2019/05/22 Python
python程序变成软件的实操方法
2019/06/24 Python
Python爬虫使用代理IP的实现
2019/10/27 Python
python高阶函数map()和reduce()实例解析
2020/03/16 Python
pyspark 随机森林的实现
2020/04/24 Python
AmazeUI 导航条的实现示例
2020/08/14 HTML / CSS
eBay美国官网:eBay.com
2020/10/24 全球购物
毕业生找工作推荐信
2013/11/21 职场文书
写演讲稿要注意的六件事
2014/01/14 职场文书
高一数学教学反思
2014/02/07 职场文书
领导班子整改方案
2014/10/25 职场文书
2014年科室工作总结范文
2014/12/19 职场文书
2015年质检工作总结
2015/05/04 职场文书
防震减灾主题班会
2015/08/14 职场文书