AngularJs功用（五）--过滤器

2023年3月24日 132次阅读 来源: 恭弘=叶 恭弘为花而生

过滤器 Filter

过滤器（filter）正如其名，作用就是吸收一个输入，经由过程某个划定规矩举行处置惩罚，然后返回处置惩罚后的结果。重要用在数据的花样化上。

过滤器通常是陪伴标记来运用的，将你model中的数据花样化为须要的花样。

表单的掌握功用重要涉及到数据考证以及表单控件的加强。关于表单控件会零丁模块做解说。

内置过滤器

先说angular自带的几种过滤器

1.currency (钱银处置惩罚)

运用currency能够将数字花样化为钱银，默许是美圆标记，你能够本身传入所需的标记，比方我传入人民币：

 {{num | currency : '￥'}}

2.date (日期花样化)

原生的js对日期的花样化才能有限，angular供应的date过滤器基础能够满足平常的花样化请求。用法以下：

{{date | date : 'yyyy-MM-dd hh:mm:ss EEEE'}} date花样可设定

　　参数用来指定所要的花样， y年 M月 d日 h时 m分 s秒 E礼拜，你能够自由组合它们。也能够运用差别的个数来限定花样化的位数。

3.filter(婚配字符串)

这个filter用来处置惩罚一个数组，然后能够过滤出含有某个字符串的元素，作为一个子数组来返回。能够是字符串数组，也能够是对象数组。假如是对象数组，能够婚配属性的值。它吸收一个参数，用来定义过滤元素的婚配划定规矩。

例子以下：

$scope.demandArray = [
  {name:'lmc',age:23},
  {name:'lzx',age:24},
  {name:'lxy',age:24},
  {name:'lyj',age:26},
  {name:'fll',age:25}
];
$scope.func = function(e){return e.age>24;};

{{ demandArray | filter : 'a' }} //婚配属性值中含有a的
{{ demandArray | filter : 4 }} //婚配属性值中含有4的
{{ demandArray | filter : {name : 'i'} }} //参数是对象，婚配name属性中含有i的
{{ demandArray | 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>{{ demandArray | orderBy : 'age' }}</div> //按age属性值举行排序，如果-age，则倒序
<div>{{ demandArray | orderBy : orderFunc }}</div> //根据函数的返回值举行排序
<div>{{ demandArray | orderBy : ['age','name'] }}</div> //假如age雷同，根据name举行排序

自定义过滤器

filter的自定义体式格局也很简朴，运用module的filter要领，返回一个函数，该函数吸收

输入值，并返回处置惩罚后的结果。

下面看一个给数字加百分比的一个自定义filter：

angular.module("MetronicApp").filter("numberToRMB",["$filter",function($filter) {
  return function (value) {
    var filter = $filter("currency");
    return filter(value,"￥");
  }
}])

花样就是如许，你的处置惩罚逻辑就写在内部的谁人闭包函数中。你也能够让本身的过滤器吸收参数，参数就定义在return的谁人函数中，作为第二个参数，或许更多个参数也能够。

更多自定义filter会在项目中细致解说。

运用要领

1.在模板中运用filter

我们能够直接在{{}}中运用filter，跟在表达式背面用 | 支解，语法以下：

{{ expression | filter }}

也能够多个filter连用，上一个filter的输出将作为下一个filter的输入：

{{ expression | filter1 | filter2 | ... }}　　

filter能够吸收参数，参数用 : 举行支解，以下：

{{ expression | filter:argument1:argument2:... }}　　

除了对

{{}}

中的数据举行花样化，我们还能够在指令中运用filter，比方先对数组array举行过滤处置惩罚，然后再循环输出：

<span ng-repeat="a in array | filter ">　

2.在controller和service中运用filter

　　我们的js代码中也能够运用过滤器，体式格局就是我们熟习的依靠注入，比方我要在controller中运用currency过滤器，只需将它注入到该controller中即可，代码以下：

app.controller('testC',function($scope,currencyFilter){
  $scope.num = currencyFilter(123534);  
}　　

在模板中运用{{num}}就能够直接输出$123,534.00了。

在效劳中运用filter也是一样的原理。

假如你要在controller中运用多个filter，并不须要一个一个注入，angular供应了一个$filter效劳能够来挪用所需的filter，你只需注入一个$filter就够了，运用要领以下：

app.controller('testC',function($scope,$filter){
  $scope.num = $filter('currency')(123534);　　
  $scope.date = $filter('date')(new Date());  
}　　

能够到达一样的结果。优点是你能够方便运用差别的filter了。

项目中会对运用到的filter做细致解说。

    原文作者：恭弘=叶 恭弘为花而生
    原文地址: https://segmentfault.com/a/1190000012948684
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。
点赞