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>インスタンスの実行 » オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします
