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


推荐阅读
  • 作为软件工程专业的学生,我深知课堂上教师讲解速度之快,很多时候需要课后自行消化和巩固。因此,撰写这篇Java Web开发入门教程,旨在帮助初学者更好地理解和掌握基础知识。通过详细记录学习过程,希望能为更多像我一样在基础方面还有待提升的学员提供有益的参考。 ... [详细]
  • Gliffy Diagrams:高效实用的流程图绘制工具
    Gliffy Diagrams 是一款高效且易于使用的流程图绘制工具,能够显著提升工作效率。结合百度脑图等辅助工具,用户可以更加便捷地创建和管理各种图表。本文详细介绍了 Gliffy Diagrams 的核心功能和使用方法,帮助读者快速上手。 ... [详细]
  • 本文深入解析了Django框架中的MVT(Model-View-Template)设计模式,详细阐述了其工作原理和应用流程。通过分析URL模式、视图、模型和模板等关键组件,读者将全面理解Django应用程序的架构体系,掌握如何高效地构建和管理Web应用。 ... [详细]
  • Oracle字符集详解:图表解析与中文乱码解决方案
    本文详细解析了 Oracle 数据库中的字符集机制,通过图表展示了不同字符集之间的转换过程,并针对中文乱码问题提供了有效的解决方案。文章深入探讨了字符集配置、数据迁移和兼容性问题,为数据库管理员和开发人员提供了实用的参考和指导。 ... [详细]
  • CSS3 @font-face 字体应用技术解析与实践
    在Web前端开发中,HTML教程和CSS3的结合使得网页设计更加多样化。长期以来,Web设计师受限于“web-safe”字体的选择。然而,CSS3中的`@font-face`规则允许从服务器端加载自定义字体,极大地丰富了网页的视觉效果。通过这一技术,设计师可以自由选择和使用各种字体,提升用户体验和页面美观度。本文将深入解析`@font-face`的实现原理,并提供实际应用案例,帮助开发者更好地掌握这一强大工具。 ... [详细]
  • 如何利用Java 5 Executor框架高效构建和管理线程池
    Java 5 引入了 Executor 框架,为开发人员提供了一种高效管理和构建线程池的方法。该框架通过将任务提交与任务执行分离,简化了多线程编程的复杂性。利用 Executor 框架,开发人员可以更灵活地控制线程的创建、分配和管理,从而提高服务器端应用的性能和响应能力。此外,该框架还提供了多种线程池实现,如固定线程池、缓存线程池和单线程池,以适应不同的应用场景和需求。 ... [详细]
  • 在探讨Hibernate框架的高级特性时,缓存机制和懒加载策略是提升数据操作效率的关键要素。缓存策略能够显著减少数据库访问次数,从而提高应用性能,特别是在处理频繁访问的数据时。Hibernate提供了多层次的缓存支持,包括一级缓存和二级缓存,以满足不同场景下的需求。懒加载策略则通过按需加载关联对象,进一步优化了资源利用和响应时间。本文将深入分析这些机制的实现原理及其最佳实践。 ... [详细]
  • CTF竞赛中文件上传技巧与安全绕过方法深入解析
    CTF竞赛中文件上传技巧与安全绕过方法深入解析 ... [详细]
  • PHP自学必备:从零开始的准备工作与工具选择 ... [详细]
  • 初探性能优化:入门指南与实践技巧
    在编程领域,常有“尚未精通编码便急于优化”的声音。为了从性能优化的角度提升代码质量,本文将带领读者初步探索性能优化的基本概念与实践技巧。即使程序看似运行良好,数据处理效率仍有待提高,通过系统学习性能优化,能够帮助开发者编写更加高效、稳定的代码。文章不仅介绍了性能优化的基础知识,还提供了实用的调优方法和工具,帮助读者在实际项目中应用这些技术。 ... [详细]
  • 在重新安装Ubuntu并配置Django和PyCharm后,忘记测试MySQL连接,导致在后续配置过程中遇到错误:ERROR 2003 (HY000) - 无法连接到本地服务器 ‘127.0.0.1’ (111)。本文将详细介绍该错误的原因及解决步骤,帮助用户快速恢复MySQL服务的正常运行。我们将从检查网络配置、验证MySQL服务状态、配置防火墙规则等方面入手,提供全面的故障排除指南。 ... [详细]
  • HTML中的runat属性具体含义及应用场景解析
    本文详细解析了HTML中`runat`属性的具体含义及其应用场景。通过深入探讨该属性的功能和使用方法,为开发者提供了宝贵的参考。读者将了解如何在实际项目中有效利用`runat`属性,提升网页开发的灵活性和效率。希望本文能为对这一主题感兴趣的读者带来实质性的帮助。 ... [详细]
  • 本文详细介绍了如何在Java Web服务器上部署音视频服务,并提供了完整的验证流程。以AnyChat为例,这是一款跨平台的音视频解决方案,广泛应用于需要实时音视频交互的项目中。通过具体的部署步骤和测试方法,确保了音视频服务的稳定性和可靠性。 ... [详细]
  • 脑机接口技术在物联网行业中的应用与前景分析
    近期,国际研究人员开发了一种轻便的脑电图(EEG)采集与信号处理系统,并在物联网领域进行了初步应用研究。该系统配备了8个可扩展的采集电极和1个参考电极,具备高灵敏度的放大功能,能够有效捕捉和处理脑电信号。通过与物联网技术的结合,该系统有望在智能家居、健康监测和人机交互等领域发挥重要作用,展现出广阔的应用前景。 ... [详细]
  • 在特定场景下,如何实现在常数时间复杂度内高效删除单向链表中的指定节点是一个值得探讨的问题。本文详细分析了给定单向链表的头指针和目标节点指针的情况下,如何设计一个高效的算法,在O(1)时间内完成节点的删除操作。通过巧妙地调整节点之间的连接关系,该方法不仅提高了删除操作的时间效率,还确保了链表结构的完整性。此外,文章还讨论了该方法在实际应用中的优缺点及适用场景。 ... [详细]
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社区 版权所有