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過濾器的基本用法，有什麼錯誤或者不足的話，希望指出與補充，共同進步。