4、angularJS过滤器

一、过滤器的作用

  过滤器用来格式化需要展示给用户的数据。

  在HTML中的模板绑定符号{{ }}内通过|符号来调用过滤器。例如，假设我们希望将字符串转换成大写可以对字符串中的每个字符都单独进行转换操作，也可以使用过滤器：{{name | uppercase }}

◇给过滤器传参数：

    <h3>货币格式</h3>

    {{123|currency}}

   

    <H3>小数位数</H3>

    {{123.3213132|number:2}}

   

    <H3>大写转换</H3>

{{'tanzhenngqiang'|uppercase}}

   <H3>小写转换</H3>

 {{'TANZHENGQIANG'|lowercase}}

 

◆number过滤器将数字格式化成文本。它的第二个参数是可选的，用来控制小数点后截取的位数。

如果传入了一个非数字字符，会返会空字符串

◆可以用|符号作为分割符来同时使用多个过滤器。

 

二、filter过滤器

   可以从给定数组中选择一个子集，并将其生成一个新数组返回。这个过滤器通常用来过滤需要进行展示的元素。例如，在做客户端搜索时，可以从一个数组中立刻过滤出所需的结果。

这个过滤器的第一个参数可以是字符串、对象或是一个用来从数组中选择元素的函数。

  示例：

 ①过滤包含字母e的单词

  {{['Ari','Lerner','Likes','To','Eat','Pizza'] | filter:'e' }}

 ②过滤对象

{{ [

{ 'name': 'Ari',

  'City': 'San Francisco',

  'favorite food': 'Pizza' },

{ 'name': 'Nate',

  'City': 'San Francisco',

  'favorite food': 'indianfood'

    }] | filter:{'favorite food': 'Pizza'} }}

③自定义函数进行过滤

◇isCapitalized函数的功能是根据首字母是否为大写返回true或false。

$scope.isCapitalized= function(str) {

return str[0] == str[0].toUpperCase();

};

使用自定义过滤函数

{{['Ari','likes','to','travel'] | filter:isCapitalized }}

<!--["Ari"] -->

  我们也可以给filter过滤器传入第二个参数，用来指定预期值同实际值进行比较的方式。

  第二个参数可以是以下三种情况之一。

◇true

用angular.equals(expected, actual)对两个值进行严格比较。

◇ false

进行区分大小写的子字符串比较。

◇函数

运行这个函数，如果返回真值就接受这个元素。

 

★JSON过滤器

json过滤器可以将一个JSON或JavaScript对象转换成字符串。这种转换对调试非常有帮助，例如：

{{ {'name':'Ari', 'City': 'SanFrancisco'} | json }}

    <!--

   {

       "name": "Ari",

       "City": "San Francisco"

       }

    -->

★limitTo过滤器（截取字符串）

   limitTo过滤器会根据传入的参数生成一个新的数组或字符串，新的数组或字符串的长度取决于传入的参数，通过传入参数的正负值来控制从前面还是从后面开始截取。

  如果传入的长度值大于被操作数组或字符串的长度，那么整个数组或字符串都会被返回。

 

例如，我们可以截取字符串的前三个字符：

{{ San Francisco is very cloudy | limitTo:3 }}

<!-- San -->

或最后的六个字符：

{{ San Francisco is very cloudy | limitTo:-6 }}

<!-- cloudy -->

对数组也可以进行同样的操作。返回数组的第一个元素：

{{ ['a','b','c','d','e','f'] | limitTo:1 }}

<!--["a"] -->

 

★orderBy过滤器

orderBy过滤器可以用表达式对指定的数组进行排序。orderBy可以接受两个参数，第一个是必需的，第二个是可选的。第一个参数是用来确定数组排序方向的谓词。

下面分情况讨论第一个参数的类型。

l 函数

当第一个参数是函数时，该函数会被当作待排序对象的getter方法。

l 字符串

对这个字符串进行解析的结果将决定数组元素的排序方向。可以传入+或-来强制进行升序或降序排列。

l 数组

在排序表达式中使用数组元素作为谓词。对与表达式结果并不严格相等的每个元素，则使用第一个谓词。

 

第二个参数用来控制排序的方向（是否逆向）。

{{ [{

   'name': 'Ari',

   'status': 'awake'

},{

   'name': 'Q',

   'status': 'sleeping'

},{

   'name': 'Nate',

   'status': 'awake'

}] | orderBy:'name' }}

结果：

[

{"name":"Ari","status":"awake"},

{"name":"Nate","status":"awake"},

{"name":"Q","status":"sleeping"}

]

也可以对排序结果进行反转。例如，通过将第二个参数设置为true可以将排序结果进行反转：

{{ [{

   'name': 'Ari',

   'status': 'awake'

},{

   'name': 'Q',

   'status': 'sleeping'

},{

    'name': 'Nate',

   'status': 'awake'

}] | orderBy:'name':true }}

 

三、自定义过滤器

    创建自定义过滤器需要将它放到自己的模块中。

◇实现一个过滤器，将字符串第一个字母转换为大写。

  过滤器本质上是一个会把我们输入的内容当作参数传入进去的函数。上面这个例子中，我们在调用过滤器时简单地把input当作字符串来处理。可以在这个函数中做一些错误检查：

angular.module('myApp.filters', []).filter('capitalize',function() {

    returnfunction(input) {

        // input是我们传入的字符串

       if (input) {

           return input[0].toUpperCase() + input.slice(1);

       }

 

    };

});

现在，如果想将一个句子的首字母转换成大写形式，可以用过滤器先将整个句子都转换成小

写，再把首字母转换成大写：

<!-- Ginger loves dog treats -->

{{ 'ginger loves dog treats' | lowercase | capitalize}}