• 技术文章 >web前端 >js教程

    AngularJS中的过滤器使用详解_AngularJS

    2016-05-16 15:54:38原创547
    过滤器是用来更改修改数据,并且可以在表达式或使用管道符指令将其归入。以下是常用的过滤器的列表。

    2015616121340418.jpg (540×292)

    小写过滤器

    添加小写的过滤器,使用管道符的表达式。在这里添加小写过滤器,以小写字母打印学生姓名。

    Enter first name:
    Enter last name: 
    Name in Upper Case: {{student.fullName() | lowercase}}
    
    

    货币滤波器

    加币过滤器使用管道符返回数的表达式。在这里,我们添加了过滤器,货币使用货币格式的打印费用。

    Enter fees: 
    fees: {{student.fees | currency}}
    
    

    过滤器的过滤器

    要仅显示所需的主题,我们使用subjectName作为过滤器。

    Enter subject: 
    Subject:
    
    • {{ subject.name + ', marks:' + subject.marks }}

    排序过滤器

    要通过标记排序主题,我们使用orderBy标记。

    Subject:
    
    • {{ subject.name + ', marks:' + subject.marks }}

    例子

    下面的例子将展示上述所有的过滤器。
    testAngularJS.html

    
    
    Angular JS Filters
    
    

    AngularJS Sample Application

    Enter first name:
    Enter last name:
    Enter fees:
    Enter subject:

    Name in Upper Case: {{student.fullName() | uppercase}}
    Name in Lower Case: {{student.fullName() | lowercase}}
    fees: {{student.fees | currency}}
    Subject:
    • {{ subject.name + ', marks:' + subject.marks }}

    输出

    在Web浏览器打开textAngularJS.html,看到以下结果:

    2015616121404523.png (688×433)

    声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn核实处理。
    专题推荐:AngularJS 过滤器
    上一篇:js+HTML5实现视频截图的方法_javascript技巧 下一篇:jquery插件splitScren实现页面分屏切换模板特效_jquery
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【腾讯云】年中优惠,「专享618元」优惠券!• 18个常见angular面试题(附答案分析)• JavaScript的Symbol类型、隐藏属性及全局注册表详解• 什么是消息队列?node中如何使用消息队列?• 浅析IDEA中如何开发Angular• 整理总结JavaScript常见的BOM操作
    1/1

    PHP中文网