AngularJS フィルター



フィルターは、パイプ文字 (|) を使用して式やディレクティブに追加できます。


AngularJS フィルター

AngularJS フィルターはデータの変換に使用できます:

フィルター説明
通貨数値を通貨形式にフォーマットします。
filter 配列項目からサブセットを選択します。
小文字文字列を小文字にフォーマットします。
orderBy 式に基づいて配列を順序付けします。
uppercase文字列を大文字にフォーマットします。

式へのフィルターの追加

フィルターは、パイプ文字 (|) とフィルターを使用して式に追加できます。 .

((以下の 2 つの例では、前の章で説明した人物コントローラーを使用します))

uppercase フィルターは、文字列を大文字にフォーマットします。 »slick "run instance"ボタンをオンラインインスタンスを表示して表示します

lowercaseのフィルターは、文字列を小文字にフォーマットします。オンラインインスタンスを表示するには、ボタンをクリックします

通貨フィルター

通貨
フィルターは数値を通貨形式にフォーマットします:

インスタンス
<!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>

インスタンスの実行 »

オンライン インスタンスを表示するには、[インスタンスの実行] ボタンをクリックします