详解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 Title、alt提示(Tips)实现源码解读
Dec 12 Javascript
formValidator3.3的ajaxValidator一些异常分析
Jul 12 Javascript
jquery滚动条插件jScrollPane的使用介绍
Nov 08 Javascript
jquery ajax jsonp跨域调用实例代码
Dec 11 Javascript
javascript制作的网页侧边弹出框思路及实现代码
May 21 Javascript
JS实现的RGB网页颜色在线取色器完整实例
Dec 21 Javascript
详解JS中的attribute属性
Apr 25 Javascript
JavaScript之面向对象_动力节点Java学院整理
Jun 29 Javascript
vue实现a标签点击高亮方法
Mar 17 Javascript
详解小程序输入框闪烁及重影BUG解决方案
Aug 31 Javascript
浅谈react性能优化的方法
Sep 05 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 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
getJSON跨域SyntaxError问题分析
2014/08/07 PHP
PHP实现简单搜歌的方法
2015/07/28 PHP
深入解析PHP中foreach语句控制数组循环的用法
2015/11/30 PHP
详解使用php调用微信接口上传永久素材
2017/04/11 PHP
PHP基于自增数据如何生成不重复的随机数示例
2017/05/19 PHP
PHP获取本周所有日期或者最近七天所有日期的方法
2018/06/20 PHP
PHP实现的简单留言板功能示例【基于thinkPHP框架】
2018/12/07 PHP
深入理解JavaScript系列(12) 变量对象(Variable Object)
2012/01/16 Javascript
jQuery方法简洁实现隔行换色及toggleClass的使用
2013/03/15 Javascript
js返回前一页刷新本页重载页面
2014/07/29 Javascript
原生JS取代一些JQuery方法的简单实现
2016/09/20 Javascript
JavaScript省市区三级联动菜单效果
2016/09/21 Javascript
微信小程序 Canvas增强组件实例详解及源码分享
2017/01/04 Javascript
javascript循环链表之约瑟夫环的实现方法
2017/01/16 Javascript
require.js中的define函数详解
2017/07/10 Javascript
JS中图片压缩的方法小结
2017/11/14 Javascript
AngularJS中重新加载当前路由页面的方法
2018/03/09 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
jQuery实现表格的增、删、改操作示例
2019/01/27 jQuery
在vue中根据光标的显示与消失实现下拉列表
2019/09/29 Javascript
python下载图片实现方法(超简单)
2017/07/21 Python
python matlibplot绘制3D图形
2018/07/02 Python
利用django+wechat-python-sdk 创建微信服务器接入的方法
2019/02/20 Python
基于sklearn实现Bagging算法(python)
2019/07/11 Python
Python多线程获取返回值代码实例
2020/02/17 Python
使用css3制作登录表单的步骤
2014/04/07 HTML / CSS
Omio法国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/13 全球购物
NFL加拿大官方网上商店:NHLShop.ca
2019/03/12 全球购物
比较基础的php面试题及答案-填空题
2014/04/26 面试题
函授大专自我鉴定
2013/11/01 职场文书
国际贸易专业个人求职信范文分享
2013/12/14 职场文书
学生会竞选演讲稿学习部
2014/08/25 职场文书
2014年教育工作总结
2014/11/26 职场文书
小学五年级(说明文3篇)
2019/08/13 职场文书
redis的list数据类型相关命令介绍及使用
2022/01/18 Redis
分享Python获取本机IP地址的几种方法
2022/03/17 Python