Angular过滤器(filter)

过滤器filter主要的作用

格式化数据 筛选数据

内置过滤器filter

Angular的过滤器就是对一个数据进行处理，主要分为格式化数据与筛选数据两种作用。Angular提供了一些内置的过滤器，分别为:

currency(货比) date(日期) filter(子串匹配) json(格式化json对象) limitTo(限制个数) lowercase(小写) uppercase(大写) number(数字) orderBy(排序)

过滤器filter的两种使用方法

在模板中使用filter

在模板中我们要如何使用filter呢？可以在{{}}中直接使用，格式如下:

{{expression|filter}}

expression表示我们要进行处理的数据，filter就是我们的过滤器了。他们之间用|隔开。

在controller中使用filter

我们要如何在controller中使用filter呢？代码如下

<p ng-controller="fcontrol">
    <p>{{result}}</p>
</p>
<script>
    angular.module("fApp",[]).controller("fcontrol",function ($scope,$filter) {
       $scope.result=$filter("currency")(123231);
    });
</script>

通过依赖注入$filter进行过滤器的使用，这里用了currency(货比)内置过滤器。

内置filter的使用

currency（货比）

<p> 

{{101224|currency:"￥"}} 

</p>

将数字格式化为货比，后面的”￥”为前置的货比类型，默认为”$”

date(日期)

<p> 

{{101224|date:"yyyy-MM-dd hh:mm:ss"}} 

</p>

将101224作为毫秒值格式化为时间

filter(子串匹配)

<p> 

{{["java","javascript","php","c#"]|filter:"javascript"}} 

</p>

只从数组中匹配javascript的字符串

json(格式化json对象)

<p> 

{{{name:"xiaoming",age:"18"}|json}} 

</p>

将json对象格式化为json字符串

limitTo(限制个数)

<p> 

{{"hello Angular"|limitTo:3}} 

</p>

字符串限制个数为3个

lowercase(小写)

<p> 

{{"HELLO ANGULAR"|lowercase}} 

</p>

字符串格式化为大写

uppercase(大写)

<p> 

{{"hello angular"|uppercase}} 

</p>

number(数字)

<p> 

{{234234.4242342|number:3}} 

</p> 

数字格式化保留小数点后3位

orderBy(排序)

<p ng-controller="fcontrol"> 

{{array|orderBy}} 

</p>

对array进行排序，js代码如下

<script>
    angular.module("fApp",[]).controller("fcontrol",function ($scope) {
        $scope.array=["12","923","54","324","66"];
    });
</script>

以上为Angular过滤器的基本用法，有什么错误或者不足的话，希望指出与补充，共同进步。