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过滤器

能够从给定数组中选择一个子集，并将其生成一个新数组返回。这个过滤器通经常使用来过滤须要进行展示的元素。比如，在做client搜索时。能够从一个数组中立马过滤出所需的结果。

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

演示样例：

①过滤包括字母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}}