ng的内置过滤器,前端的过滤器-前端-E先生的博客
Java
MySQL
大数据
Python
前端
黑科技
大语言模型
    首页 >> 互联网 >> 前端

ng的内置过滤器,前端的过滤器

[导读]:ng的内置过滤器ng内置了九种过滤器,使用方法都非常简单,看文档即懂。1.currency(货币处理)使用currency可以将数字格式化为货币,默认是美元符号,你可以自己传入所需的符号,例如我传入人民币:{{num|currency:'¥'}}2.date(日期格式化)原生的js对日期的格式化能力有限,ng提供的dat...

 ng的内置过滤器 

  ng内置了九种过滤器,使用方法都非常简单,看文档即懂。

  1.currency(货币处理)

  使用currency可以将数字格式化为货币,默认是美元符号,你可以自己传入所需的符号,例如我传入人民币:

  {{num|currency:'¥'}}

  2.date(日期格式化)

  原生的js对日期的格式化能力有限,ng提供的date过滤器基本可以满足一般的格式化要求。用法如下:

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

  参数用来指定所要的格式,y M d h m s E分别表示年月日时分秒星期,你可以自由组合它们。也可以使用不同的个数来限制格式化的位数。另外参数也可以使用特定的描述性字符串,例如“shortTime”将会把时间格式为12:05 pm这样的。ng提供了八种描述性的字符串,个人觉得这些有点多余,我完全可以根据自己的意愿组合出想要的格式,不愿意去记这么多单词~

  3.filter(匹配子串)

  这个名叫filter的filter(不得不说这名字起的,真让人容易混淆——!)用来处理一个数组,然后可以过滤出含有某个子串的元素,作为一个子数组来返回。可以是字符串数组,也可以是对象数组。如果是对象数组,可以匹配属性的值。它接收一个参数,用来定义子串的匹配规则。下面举个例子说明一下参数的用法,我用现在特别火的几个孩子定义了一个数组:

  $scope.childrenArray=[
  {name:'kimi',age:3},
  {name:'cindy',age:4},
  {name:'anglar',age:4},
  {name:'shitou',age:6},
  {name:'tiantian',age:5}
  ];
  $scope.func=function(e){return e.age>4;}
  {{childrenArray|filter:'a'}}//匹配属性值中含有a的
  {{childrenArray|filter:4}}//匹配属性值中含有4的
  {{childrenArray|filter:{name:'i'}}}//参数是对象,匹配name属性中含有i的
  {{childrenArray|filter:func}}//参数是函数,指定返回age>4的

  4.json(格式化json对象)

  json过滤器可以把一个js对象格式化为json字符串,没有参数。这东西有什么用呢,我一般也不会在页面上输出一个json串啊,官网说它可以用来进行调试,嗯,是个不错的选择。或者,也可以用在js中使用,作用就和我们熟悉的JSON.stringify()一样。用法超级简单:

  {{jsonTest|json}}

  5.limitTo(限制数组长度或字符串长度)

  limitTo过滤器用来截取数组或字符串,接收一个参数用来指定截取的长度,如果参数是负值,则从数组尾部开始截取。个人觉得这个filter有点鸡肋,首先只能从数组或字符串的开头/尾部进行截取,其次,js原生的函数就可以代替它了,看看怎么用吧:

  {{childrenArray|limitTo:2}}//将会显示数组中的前两项

  6.lowercase(小写)

  把数据转化为全部小写。

  7.uppercase(大写)

  把数据转化为全部大写。

  8.number(格式化数字)

  number过滤器可以为一个数字加上千位分割,像这样,123,456,789。同时接收一个参数,可以指定float类型保留几位小数:

  {{num|number:2}}

  9.orderBy(排序)

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

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

过滤器filter是数组对象的一个方法,该方法不会改变原数组。该数组有两个参数第一个是函数并且数组中每个元素都会执行这个函数,这个函数共有三个参数第一个为必填当前元素的值,第二个为可选,当前元素的索引值。第三个可选,当前元素属于的数组对象。第二个是回调函数对象作为该执行回调时使用,传递给函数,用作 "this" 的值。如果省略了 thisValue ,"this" 的值为 "undefined"。

    <script>
        let arr=[1,2,3,4,5,6,7,8];
        arr.filter(function(value,index,arr){
            console.log("当前值"+value)
            console.log("当前值"+index)
            console.log("当前所属对象"+arr)
        })
    </script>

打印结果为:

image.png

当前值1
当前值0
当前所属对象1,2,3,4,5,6,7,8
当前值2
当前值1
当前所属对象1,2,3,4,5,6,7,8
当前值3
当前值2
当前所属对象1,2,3,4,5,6,7,8
当前值4
当前值3
当前所属对象1,2,3,4,5,6,7,8
当前值5
当前值4
当前所属对象1,2,3,4,5,6,7,8
当前值6
当前值5
当前所属对象1,2,3,4,5,6,7,8
当前值7
当前值6
当前所属对象1,2,3,4,5,6,7,8
当前值8
当前值7
当前所属对象1,2,3,4,5,6,7,8

对其修改一下值看一下是否会改变原数组:

    let arr=[1,2,3,4,5,6,7,8];
    let arr1= arr.filter(function(value,index,arr){
      arr[index]=value++
       console.log(arr)
      return arr[index]
   })
  console.log(arr1)
  console.log(arr)

通过打印出来发现是不会改变原数组arr的。

本文来自E先生的博客,如若转载,请注明出处:https://www.javajz.cn

留言区

联系人:
手   机:
内   容:
验证码:

历史留言

欢迎加Easy的QQ