Angular过滤器(filter)

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呢？代码如下

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

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

内置filter的使用

• currency（货比）

  <div>
{{101224|currency:"￥"}}
</div>

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

• date(日期)

  <div>
{{101224|date:"yyyy-MM-dd hh:mm:ss"}}
</div>

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

• filter(子串匹配)

  <div>
{{["java","javascript","php","c#"]|filter:"javascript"}}
</div>

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

• json(格式化json对象)

  <div>
{{{name:"xiaoming",age:"18"}|json}}
</div>

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

• limitTo(限制个数)

  <div>
{{"hello Angular"|limitTo:3}}
</div>

字符串限制个数为3个

• lowercase(小写)

  <div>
{{"HELLO ANGULAR"|lowercase}}
</div>

字符串格式化为大写

• uppercase(大写)

  <div>
{{"hello angular"|uppercase}}
</div>

• number(数字)

  <div>
{{234234.4242342|number:3}}
</div>
  数字格式化保留小数点后3位

• orderBy(排序)

  <div ng-controller="fcontrol">
{{array|orderBy}}
</div>

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

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

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