AngularJS常见过滤器用法实例总结

本文实例讲述了AngularJS常见过滤器用法。分享给大家供大家参考,具体如下:

创新互联建站是一家集网站建设,永登企业网站建设,永登品牌网站建设,网站定制,永登网站建设报价,网络营销,网络优化,永登网站推广为一体的创新建站企业,帮助传统企业提升企业形象加强企业竞争力。可充分满足这一群体相比中小企业更为丰富、高端、多元的互联网需求。同时我们时刻保持专业、时尚、前沿,时刻以成就客户成长自我,坚持不断学习、思考、沉淀、净化自己,让我们为更多的企业打造出实用型网站。

过滤器用来格式化需要展示给用户的数据。在HTML中的模板绑定符号 {{ }} 内通过 | 符号来调用过滤器。以下是常用的过滤器。

大小写过滤器

{{ name | uppercase }} 大写过滤器
{{ name | lowercase}} 小写过滤器

实例:(大写过滤器)

姓氏:

名字:

名字转大写: {{student.fullName() | uppercase}}

货币过滤器

currecy 过滤器可以将一个数值格式化为货币格式。用 {{ 123 | currency }} 来将123转化成货币格式。currecy 过滤器允许我们自己设置货币符号。默认情况下会采用客户端所处区域的货币符号,但是也可以自定义货币符号。如下:

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

日期过滤器

date 过滤器可以将日期格式化成需要的格式。如下:

{{data | date : 'yyyy-MM-dd hh:mm:ss EEEE'}}

limitTo过滤器

limitTo过滤器用来截取数组或字符串,接收一个参数用来指定截取的长度。实例:


  {{ childrenArray | limitTo : 2 }}
  


orderBy过滤器:

orderBy过滤器可以将一个数组中的元素进行排序,接收一个参数来指定排序规则,参数可以是一个字符串,表示以该属性名称进行排序。可以是一个函数,定义排序属性。还可以是一个数组,表示依次按数组中的属性值进行排序(若按第一项比较的值相等,再按第二项比较),还是拿上面的孩子数组举例:

{{ childrenArray | orderBy : 'age' }}
//按age属性值进行排序
{{ childrenArray | orderBy : orderFunc }}
//按照函数的返回值进行排序
{{ childrenArray | orderBy : ['age','name'] }}
//如果age相同,按照name进行排序

自定义过滤器:

AngularJS编写自定义过滤器的形式和AngularJS的factory service非常相像,一定记得它返回一个对象或者是一个函数即可,编写的时候,只需要一个带有一个以上参数的函数即可。格式大致如下:

app.filter('filter(过滤器)名称',function(){
      return function(需要过滤的对象,过滤器参数1,过滤器参数2,...){
           //...执行业务逻辑代码
           return 处理后的对象;
      }
});

实例:(首字母大写)

{{ 'ginger loves dog treats' | capitalize }}


更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

希望本文所述对大家AngularJS程序设计有所帮助。


当前题目:AngularJS常见过滤器用法实例总结
标题路径:http://hbruida.cn/article/ghhhsj.html