AngularJs功能(五)--过滤器

前端之家收集整理的这篇文章主要介绍了AngularJs功能(五)--过滤器前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

过滤器 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',{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',$filter){
  $scope.num = $filter('currency')(123534);  
  $scope.date = $filter('date')(new Date());  
}  

可以达到同样的效果。好处是你可以方便使用不同的filter了。

项目中会对使用到的filter做详细讲解。

猜你在找的Angularjs相关文章