【AnjularJS系列6】过滤器

第六篇，过滤器

 

AngularJS 过滤器可用于转换数据：

过滤器	描述
currency	格式化数字为货币格式。
filter	从数组项中选择一个子集。
lowercase	格式化字符串为小写。
orderBy	根据某个表达式排列数组。
uppercase	格式化字符串为大写。

 

 

 

 

 

 

 

 

1、在模板中使用filter：直接在{{}}中使用filter，在表达式后用|进行分割

    A、单一filter

      语法：{{ expression | filter }}

      示例：<div ng-app="">

<span>lowercase:{{ "JUST Do It"| lowercase }}</span><br />
<span>uppercase:{{ "lower cap string" | uppercase }}</span><br />
<span>currency:{{ "250" | currency }}</span>
</div>

      显示结果：lowercase:just do it
                       uppercase:LOWER CAP STRING
                       currency:$250.00

   B、能够多个filter连用，上一个filter的输出将做为下一个filter的输入

      语法：{{ expression | filter1 | filter2 | ... }}

      示例：<div ng-app="">

<span>多个过滤器:</span><br />
<span>小数点，货币单位{{ "320"| number:2|currency }}</span><br />
</div>

      显示结果：小数点，货币单位$320.00

      number先将数字保留两位小数，currency再转换成货币单位,其中，number:2就是如下要说明的带参数的过滤器

   C、带参数的过滤器

     1) currency ：使用currency能够将数字格式化为货币，默认是美圆符号，你能够本身传入所需的符号

                           {{ "123"|currency:'￥' }}

      2) number : 能够为一个数字加上千位分割，例如，123,456,789。

                          同时接收一个参数，能够指定小float类型保留几位小数：

                          {{ num | number : 2 }}

      3) limitTo：limitTo过滤器用来截取数组或字符串，接收一个参数用来指定截取的长度。

                        {{ childrenArray|limitTo:2 }}（childrenArray为已初始化的数组，下文亦是）

      4) orderBy :orderBy过滤器能够将一个数组中的元素进行排序，

         参数能够是一个字符串，表示以该属性名称进行排序。能够是一个函数，定义排序属性。

        还能够是一个数组，表示依次按数组中的属性值进行排序（若按第一项比较的值相等，再按第二项比较）

                {{ childrenArray|orderBy:'age'}}                   OR           {{ childrenArray|orderBy:['age','name']}}

   D、自定义过滤器：利用filter方法建立过滤器，将表达式做为输入，进行数据处理

         1)单一参数

            <span>{{childrenArray[0] |getChildName}}</span>

 1 <script type="text/javascript">   
 2     var app = angular.module('MyFilter', []);
 3     app.controller('MyFilterCtrl',function($scope) {
 4         $scope.childrenArray = [
 5         {name:'Kimi',age:3},
 6         {name:'Shitou',age:6},
 7         {name:'Anglar',age:4},
 8         {name:'Tiantian',age:5},
 9         {name:'Cindy',age:4}
10         ];
11     });
12     app.filter('getChildName',function(){
13         return function(inputArray){
14             return inputArray.name+"今年"+inputArray.age+"岁";
15         }
16     });
17 </script>

自定义过滤器

       2)多个参数

 

二、在controller和service中使用filter