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

在前一篇(宣告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 }}

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

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


filter在HTML和javascript的寫法

前面例子是filter在HTML的寫法

    {{ currency_expression | currency : symbol }}

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 目前提供的運算子如下:

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>
輸入你想找的人

{{friend.name}}


limitTo (Plunker Demo)

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

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

{{ "friend in friends" | limitTo:3 }}

{{ [1,2,3,4,5] | limitTo:3 }}

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>
朋友清單

{{friend.name}}

要指定為遞增排序,除了用一個布林值為true的reverse參數,另外還有一個寫法,就是 orderBy:'+name',其中'+'是遞增、'-'是遞減。
<p ng-repeat="friend in friends | orderBy:'+name'">
    {{friend.name}}
</p>
朋友清單

{{friend.name}}

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

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

留言

這個網誌中的熱門文章

AngularJS (1) 宣告ng-app

href with relative url 在錨點使用相對路徑