AngularJS (2) 用 $filter 轉換數值和過濾

作者： Tshuà Bûn-lī (蔡文莉) - 7月 25, 2014

在前一篇(宣告ng-app)用ng-app宣告網頁的AngularJS執行範圍，基本上，ng-app宣告之後，就可以使用angularJS作一些基本運算，或是轉換。

filter是angularJS提供的運算子，可以對數值作的轉換或是附加處理。它的寫法就像是LINUX的Shell script的pipe運算。例如，currency幫你把數字標記成金額：

<head>
  <script src="angular.js"></script> /*以下的例子視為已有此檔*/
</head>
<body ng-app>
  {{ 1+2 }}
  金額：{{ 1+2 | currency }}
  新台幣：{{ 1+2 | currency:"NT$" }}
</body>

金額：{{ 1+2 | currency }}

新台幣：{{ 1+2 | currency:"NT$" }}

filter在HTML和javascript的寫法

前面例子是filter在HTML的寫法

javascript寫法

$filter('currency')(symbol)

javascript的完整寫法，是在控制器的引數列加入$filter的宣告，告訴angularJS此控制器需要用到filter功能。

<head>
   <script>
        var app1 = angular.module("app1",[]);

        app1.controller("MoneyController", function($scope,$filter){
           $scope.pay = $filter("currency")(3); 
           $scope.payNT = $filter("currency")(3,"NT$");
      });
   </script>
</head>

<body ng-app="app1">
    <div ng-controller="MoneyController">
       <p>{{ pay }}</p>
       <p>{{ payNT }}</p>
    </div>
</body>

金額：{{ 1+2 | currency }}

新台幣：{{ 1+2 | currency:"NT$" }}

HTML和javascript的寫法在Plunk Demo

$filter 目前提供的運算子如下：

currency
number
filter，就像linux grep，取出符合條件的陣列元素
date，ISO 8601 時間格式
json
lowercase
uppercase
limitTo，只取出指定數量的陣列元素
orderBy，陣列排序

filter、limitTo、orderBy 很好用，也比較需要範例去實作了解，請看下面。

filter (Plunker Demo)

取出符合條件的陣列元素

<head>
   <script>
      var app1 = angular.module("app1",[]);

      app1.controller("FriendController",          
      function($scope){
            $scope.friends = [
                   {name:"John"},
                   {name:"Mary"},
                   {name:"Sui2"},
                   {name:"Lily"},
                   {name:"Joe"},
                   {name:"Jemie"}
            ];
      });
   </script>
</head>
<body ng-app="app1">
   <div ng-controller="FriendController">
     <input type="text" ng-model="searchText"/>
     <p ng-repeat="friend in friends| filter:searchText">
         {{friend.name}}
     </p>
   </div>
</body>

輸入你想找的人

limitTo (Plunker Demo)

取出指定數量的元素，可以是字串、陣列

<body ng-app="app1">
   <p>{{ "friend in friends" | limitTo:3 }}</p>
   <p>{{ [1,2,3,4,5] | limitTo:3 }}</p>
</body>

limitTo還可以進一步和選單結合，用選單選出limiTo的值 (Plunker)

<head>
   <script>
      var app1 = angular.module("app1",[]);
      app1.controller("FriendController", function($scope){
        /*預設顯示一位*/
        $scope.limitNum = 1; 
        $scope.friends = [...];
   });
   </script>
</head>

$scope.limitNum 是在javascript定義的變數，值為1，在HTML直接拿來當limitTo的參數，一開始只會顯示一位。

但我們可以用選單改變$scope.limitNum的數值(雙向綁定的好處！)

<body ng-app="app1">
    <div ng-controller="FriendController">
      請選擇想看到幾個朋友
      <select ng-model="limitNum"
        ng-options="var for var in [1,2,3,4,5]">
      </select>
      <p ng-repeat="friend in friends| limitTo:limitNum">
         {{$index}}. {{friend.name}}
      </p>
</body>

請選擇想看到幾個朋友

{{$index}}.{{friend.name}}

orderBy (Plunker)

陣列排序，但要注意的是，欄位名稱因為是字串，例如用name做朋友清單的排序，在HTML就要寫成orderBy:'name'

<head>
   <script>
      var app1 = angular.module("app1",[]);
      app1.controller("FriendController", function($scope){
        /*遞減或遞增排序*/
        $scope.reverse = true; 
        $scope.friends = [...];
   });
   </script>
</head>
<body ng-controller="FriendController">
      <h5>朋友清單</h5>
      <p ng-repeat="friend in friends | orderBy:'name':reverse">
          {{friend.name}}
        </p>
</body>

朋友清單

要指定為遞增排序，除了用一個布林值為true的reverse參數，另外還有一個寫法，就是 orderBy:'+name'，其中'+'是遞增、'-'是遞減。

<p ng-repeat="friend in friends | orderBy:'+name'">
    {{friend.name}}
</p>

朋友清單

※這些運算子可以合在一起寫，完整程式碼請看最後一個的(Plunker)

  <!--排序完成後只顯示幾個-->
  <input ng-model="shownum"/>
  <p ng-repeat="friend in friends | orderBy:'name':reverse | limitTo:shownum">
    {{friend.name}}

搜尋此網誌

Ti-Tiâu