热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

这篇文章主要介绍了详解AngularJS中$filter过滤器使用(自定义过滤器)的相关资料,非常不错,具有参考借鉴价值,需要的朋友可以参考下

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,直接放标签里
{{data.code}}
,会显示code值而不是code值对应的职称,这时候就可以用这个专门 * 针对这个转换的自定义过滤器 * 使用方式: * (1)HTML中:
{{data.code | ChangeCode}}
//跟内置过滤器一样的方式 * (2)js中:变量 = $filter("ChangeCode")(被过滤的code数据)//一样的调用方式 * * */

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

myApp.filter("deleteByAge",function () {
  return function (input,byAge,age) {
    var array = [];
    for(var i=0;i

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

 (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过滤器使用(自定义过滤器),希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!


推荐阅读
  • 本文提供了2023年最新的解决方案,帮助用户了解如何在移动设备上顺利访问和浏览PHP网页,涵盖从基础设置到高级技巧的全方位指导。 ... [详细]
  • 近期,谷歌公司的一名安全工程师Eduardo Vela在jQuery Mobile框架中发现了一项可能引发跨站脚本攻击(XSS)的安全漏洞。此漏洞使得使用jQuery Mobile的所有网站面临潜在的安全威胁。 ... [详细]
  • 本文探讨如何使用 PHP 进行字符串处理,特别是如何检测一个字符串是否存在于另一个字符串中,并确定其具体位置。通过实例代码展示,帮助读者掌握这一常用功能。 ... [详细]
  • 百度云加速节点IP白名单配置指南:宝塔面板Nginx防火墙应用
    百度云加速为已备案的网站提供免费加速服务,但使用宝塔面板自带Nginx防火墙的用户需将百度云加速的CDN IP段加入白名单以确保正常访问。本文将详细介绍如何操作。 ... [详细]
  • Python 中使用 Pyecharts 绘制雷达图详解
    本文将详细介绍如何在 Python 环境中利用 Pyecharts 库来创建美观且功能丰富的雷达图。适合需要图形化展示多维度数据的开发者和研究人员。 ... [详细]
  • 解决ASP.NET Core在IIS中出现的502.5进程失败错误
    本文详细探讨了在Windows Server 2012环境下安装.NET Core后,IIS站点出现502.5错误的原因及解决方案,包括重启服务和系统的方法。 ... [详细]
  • 本文探讨了Java编程中MVC模式的优势与局限,以及如何利用Java开发一款基于鸟瞰视角的赛车游戏。 ... [详细]
  • 尽管PHP是一种强大且灵活的Web开发语言,但开发者在使用过程中常会陷入一些典型的陷阱。本文旨在列出PHP开发中最为常见的10种错误,并提供相应的预防建议。 ... [详细]
  • 本文详细记录了利用HTML5和CSS3进行企业网站开发的过程,包括技术要点、实践技巧以及常见问题解决方法。 ... [详细]
  • 本文详细介绍了ASP.NET缓存的基本概念和使用方法,包括输出缓存、数据缓存及其高级特性,如缓存依赖、自定义缓存和缓存配置文件等。通过合理利用这些缓存技术,可以显著提升Web应用程序的性能。 ... [详细]
  • 本文精选了几所优秀的PHP实训和培训学校,为希望深入学习PHP编程的学员提供参考。 ... [详细]
  • AJAX技术允许网页在不重新加载整个页面的情况下进行异步更新,通过向服务器发送请求并接收JSON格式的数据,实现局部内容的动态刷新。 ... [详细]
  • 本文详细探讨了JavaScript中的闭包与柯里化技术,这两者是函数式编程的重要组成部分,对提升代码的灵活性和可维护性具有重要作用。 ... [详细]
  • Web App vs Native App:未来的移动应用趋势
    随着移动互联网的发展,Web App和Native App之间的竞争日益激烈。对于开发者而言,选择哪一种技术路径更为明智?本文将深入探讨两种应用模式的特点及未来趋势。 ... [详细]
  • Java程序设计第五周学习总结与实践
    本次学习总结涵盖了本周在Java程序设计课程中的学习要点,包括代码阅读、抽象类的应用、接口的使用以及面向接口编程的概念。同时,还包括了具体的书面作业解析。 ... [详细]
author-avatar
zqb_0125
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有