最新のWeb開発のチュートリアル
 

AngularJSフィルター

❮前 次の章❯

フィルタは、データをフォーマットするAngularJSで添加することができます。

AngularJSのフィルタ

AngularJSは、データを変換するためのフィルタを提供します。

  • currency通貨形式に番号をフォーマットします。
  • date指定された形式に日付をフォーマットします。
  • filter 、アレイからのアイテムのサブセットを選択します。
  • json JSONのオブジェクトを文字列にフォーマットします。
  • limitTo要素/指定した文字数の中に、配列/文字列を制限します。
  • lowercase文字列を小文字にフォーマットします。
  • number数値を文字列にフォーマットします。
  • orderBy発現による配列を注文します。
  • uppercase形式大文字に文字列。

式にフィルタを追加します

フィルタはパイプ文字使用して式に追加することができます|フィルタが続くが、。

uppercase大文字にフィルタ書式文字列：

例

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | uppercase }}</p>

</div>
»それを自分で試してみてください

lowercase小文字にフィルタ書式文字列：

例

<div ng-app="myApp" ng-controller="personCtrl">

<p>The name is {{ lastName | lowercase }}</p>

</div>
»それを自分で試してみてください

指令へのフィルタの追加

フィルタは同様に、ディレクティブに追加されたng-repeatパイプ文字使用することにより、 |フィルターが続くが、：

例

orderByフィルターは配列をソートします。

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names | orderBy:'country'">
    {{ x.name + ', ' + x.country }}
  </li>
</ul>

</div>
»それを自分で試してみてください

通貨フィルター

currencyフィルタは通貨として番号をフォーマットします：

例

<div ng-app="myApp" ng-controller="costCtrl">

<h1>Price: {{ price | currency }}</h1>

</div>
»それを自分で試してみてください

私たちの通貨フィルタについてもっと知ろAngularJS通貨フィルターリファレンス

フィルターフィルター

filterフィルターは、配列のサブセットを選択します。

filterフィルタは、アレイで使用することができ、それが唯一の一致するアイテムを含む配列を返します。

例

「i」の文字が含まれている名前を返します：

<div ng-app="myApp" ng-controller="namesCtrl">

<ul>
  <li ng-repeat="x in names | filter : 'i'">
    {{ x }}
  </li>
</ul>

</div>
»それを自分で試してみてください

私たちの中にフィルターフィルターについてもっと知ろAngularJSフィルタフィルタ参照

ユーザー入力に基づいて配列をフィルタリング

設定することにより、 ng-model入力フィールドにディレクティブを、私たちは、フィルタ内の式として入力フィールドの値を使用することができます。

入力フィールドに文字を入力し、リストが/縮小の一致に応じて成長します。

  • {{ バツ }}

例

<div ng-app="myApp" ng-controller="namesCtrl">

<p><input type="text" ng-model="test"></p>

<ul>
  <li ng-repeat="x in names | filter : test">
    {{ x }}
  </li>
</ul>

</div>
»それを自分で試してみてください

ユーザー入力に基づいて配列をソートします

ソート順を変更するには、テーブルヘッダをクリックしてください::

名 国
{{x.name}} {{x.country}}

追加することにより、 ng-clickテーブルのヘッダーにディレクティブを、我々は、配列のソート順を変更する機能を実行することができます。

例

<div ng-app="myApp" ng-controller="namesCtrl">

<table border="1" width="100%">
  <tr>
    <th ng-click="orderByMe('name')">Name</th>
    <th ng-click="orderByMe('country')">Country</th>
  </tr>
  <tr ng-repeat="x in names | orderBy:myOrderBy">
    <td>{{x.name}}</td>
    <td>{{x.country}}</td>
  </tr>
</table>

</div>

<script>
angular.module('myApp', []).controller('namesCtrl', function($scope) {
  $scope.names = [
    {name:'Jani',country:'Norway'},
    {name:'Carl',country:'Sweden'},
    {name:'Margareth',country:'England'},
    {name:'Hege',country:'Norway'},
    {name:'Joe',country:'Denmark'},
    {name:'Gustav',country:'Sweden'},
    {name:'Birgit',country:'Denmark'},
    {name:'Mary',country:'England'},
    {name:'Kai',country:'Norway'}
  ];
  $scope.orderByMe = function(x) {
    $scope.myOrderBy = x;
  }
});
</script>
»それを自分で試してみてください

カスタムフィルタ

あなたのモジュールに新しいフィルタファクトリ関数を登録することにより、独自のフィルタを行うことができます。

例

「myFormat」と呼ばれるカスタムフィルタを作成します。

<ul ng-app="myApp" ng-controller="namesCtrl">
    <li ng-repeat="x in names">
        {{x | myFormat }}
    </li>
</ul>

<script>
var app = angular.module('myApp', []);
app.filter(' myFormat ', function() {
    return function(x) {
        var i, c, txt = "";
        for (i = 0; i < x.length; i++) {
            c = x[i];
            if (i % 2 == 0) {
                c = c.toUpperCase();
            }
            txt += c;
        }
        return txt;
    };
});
app.controller('namesCtrl', function($scope) {
    $scope.names = ['Jani', 'Carl', 'Margareth', 'Hege', 'Joe', 'Gustav', 'Birgit', 'Mary', 'Kai'];
});
</script>
»それを自分で試してみてください

myFormatフィルタは、他のすべての文字を大文字にフォーマットします。


❮前 次の章❯