AngularJS フィルター
フィルターは、パイプ文字 (|) を使用して式やディレクティブに追加できます。
AngularJS フィルター
AngularJS フィルターはデータの変換に使用できます:
フィルター | 説明 |
---|---|
通貨 | 数値を通貨形式にフォーマットします。 |
filter | 配列項目からサブセットを選択します。 |
小文字 | 文字列を小文字にフォーマットします。 |
orderBy | 式に基づいて配列を順序付けします。 |
uppercase | 文字列を大文字にフォーマットします。 |
式へのフィルターの追加
フィルターは、パイプ文字 (|) とフィルターを使用して式に追加できます。 .
((以下の 2 つの例では、前の章で説明した人物コントローラーを使用します))
uppercase フィルターは、文字列を大文字にフォーマットします。 »slick "run instance"ボタンをオンラインインスタンスを表示して表示します
フィルターは数値を通貨形式にフォーマットします:インスタンス
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="personCtrl"> <p>姓名为 {{ lastName | uppercase }}</p> </div> <script src="personController.js"></script> </body> </html>
インスタンスを実行する »
「インスタンスを実行」をクリック「」ボタンを押してオンラインの例を参照してください
ディレクティブにフィルターを追加します
フィルターは、パイプ文字 (|) とフィルターを使用してディレクティブに追加できます。 OnRDERBYter フィルターは、次の式に従って配列を配置します:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="personCtrl"> <p>姓名为 {{ lastName | lowercase }}</p> </div> <script src="personController.js"></script> </body> </html>
オンライン インスタンスを表示するには、「サンプルを実行」ボタンをクリックします
フィルター入力
入力フィルター パイプ文字 (|) と、その後にコロンとモデル名が続くフィルターを介してディレクティブに追加できます。
filter
フィルターは配列からサブセットを選択します:Instances
インスタンスの実行 » オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script> </head> <body> <div ng-app="myApp" ng-controller="costCtrl"> 数量: <input type="number" ng-model="quantity"> 价格: <input type="number" ng-model="price"> <p>总价 = {{ (quantity * price) | currency }}</p> </div> <script> var app = angular.module('myApp', []); app.controller('costCtrl', function($scope) { $scope.quantity = 1; $scope.price = 9.99; }); </script> </body> </html>
インスタンスの実行 » オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします