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',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作详细讲解。