美文网首页
angularJS中的内置过滤器

angularJS中的内置过滤器

作者: 圆心角 | 来源:发表于2017-02-08 21:44 被阅读472次

AngularJS中 ,过滤器可以使用一个管道符(|)添加到表达式和指令中  。angularjs的filter功能可分为二种,一种是内置的过滤器,一种是自定义的。

简单的说一些内置控制器,不全,但经常见到

先把script给大家 方便理解

大体的script

1、货币格式处理currency允许我们设置自己的货币符号,默认情况下会采用客户端所处区域的货币符号。可以这样使用:{{ 3600 | currency: "$¥"}}返回结果为$¥123.00

结构代码
输出显示的结果

2、字母大小写转换。uppercase  转换成大写 ; lowercase 转换成小写

结构代码
输出显示结果

3、限制字符串或数组的长度    limitTo:3  限制长度为3  在管道符后面  管道符可连续使用,相当于多次过滤

代码结构 输出显示结果

4、给数字设置千分位  number : 2,保留两位小数

代码结构 输出显示结果

5、日期格式转化  这里大家可以上网搜一下日期秒数的时间戳,精确到毫秒,给大家一个网站http://tool.chinaz.com/Tools/unixtime.aspx,可以搜一下

代码结构 输出显示结果

6、普通数组排序  默认是升序,和老师的名字重了,升序排列是orderBy,,降序排列是orderBy:order:true

升序的两种方法 降序排列 输出结果显示

7、数组中有对象的排序(按照对象的某个属性去排序)或者其他的属性来排序都行

升序和降序的代码
输出显示结果

下面利用过滤器写一个小功能,

 

这里面有条件过滤和条件排序两个功能。在条件过滤中写ng-model="ctrl.queryFilter",意思是按照input输入框输入的值去过滤,在条件排序中设置ng-model="ctrl.orderType"意思是按照下拉框中的条件进行过滤,然后在要输出的标签内部写出和它们相对应的过滤属性名字,相当于进行条件设置。  里面还有个小错误  在li标签里的ng-repeat  写成了repear  ,很抱歉手误,运行结果

gif.gif

发现gif不好使  ,这Tama就尴尬了,回头我再搞

自定义过滤器:功能是根据字符某个串,过滤掉这个字符串中的数字。思想也特别简单,就是利用正则表达式把里面的数字进行筛选,然后利用angularJS的写法进行编译

代码结构
结果

相关文章

  • AngularJS入门教程-过滤器(五)

    今天,我们来了解一下AngularJS的过滤器。AngularJS的filter分内置的过滤器和自定义的过滤器,这...

  • Vue与Angular以及React的区别?

    1、与AngularJS的区别 相同点:都支持指令:内置指令和自定义指令;都支持过滤器:内置过滤器和自定义过滤器;...

  • angularJS中的内置过滤器

    在AngularJS中 ,过滤器可以使用一个管道符(|)添加到表达式和指令中 。angularjs的filter功...

  • Vue.js与其他框架的区别

    1.与AngularJS的区别 相同点: 都支持指令:内置指令和自定义指令。 都支持过滤器:内置过滤器和自定义过滤...

  • Angular - 过滤器

    什么是过滤器 过滤器可以用来格式化需要展示的数据。AngularJS 有很多内置过滤器,同时也可以自己创建过滤器。...

  • AngularJS学习笔记(五)过滤器

    过滤器 过滤器用来格式化需要展示给用户的数据。AngularJS有很多实用的内置过滤器,同时提供了方便的途径可以自...

  • AngularJS 参考手册

    AngularJS 指令 本教程用到的 AngularJS 指令 : 过滤器解析 AngularJs 过滤器。 A...

  • 15. Angular的内置指令(过滤器)

    AngularJS中自定义指令处理 以ng开头的指令都是内置指令。 内置指令是AngularJS已经处理,使用内置...

  • 35.Gateway局部过滤器

    局部过滤器 局部过滤器是针对单个路由的过滤器。 内置局部过滤器 在SpringCloud Gateway中内置了很...

  • 16. 过滤器 filter

    AngularJS中的过滤器 filter使用,在 搜索中 使用非常广泛

网友评论

      本文标题:angularJS中的内置过滤器

      本文链接:https://www.haomeiwen.com/subject/tsubittx.html