AngularJS Filter

今回はFilterをやります。Filterを使うと表示するデータを表示前に編集してから表示させることが出来ます。
Filterは自分で作成することも出来ますが、AngularJSがデフォルトで用意してくれているものを使うことも出来ます。

文字列フィルタ

				
<!DOCTYPE html>
<html>

<head>
	<meta charset="UTF-8">
	<title>AngularJS Test</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
	<!-- script src="angular.min.js"></script -->
	<script>
		var testApp = angular.module("testApp", []);

		function TestCtrl() {
			this.date = new Date();
			this.number = 1234567890;
			this.message = "Hello World!!";
		}

		testApp.component("hello", {
			template:
			"currency  : {{ obj.number  | currency:'\u00a5':0 }}        <br />" +
			"number    : {{ obj.number  | number }}                     <br />" +
			"date      : {{ obj.date    | date:'yyyy/MM/dd HH:mm:ss' }} <br />" +
			"json      : {{ obj         | json }}                       <br />" +
			"lowercase : {{ obj.message | lowercase }}                  <br />" +
			"uppercase : <span ng-bind='obj.message  | uppercase'></span>",
			controller: TestCtrl,
			controllerAs: "obj"
		});
	</script>
</head>

<body ng-app="testApp">
	<hello></hello>
</body>

</html>

実行イメージ

フィルタを使用するには、変数の後ろに|(バーティカルバー)を付けてフィルタ文字列を指定します。

				
{{ 変数 | フィルタ文字列 }}

フィルタの後ろにフィルタを付けることによって、フィルタの結果に対し、さらにフィルタリングすることができます。

				
{{ 変数 | フィルタ文字列1 | フィルタ文字列2 }}

フィルタの後ろに:(コロン)を付けるとフィルタに引数を渡せます。

				
{{ 変数 | フィルタ文字列 : 引数1 : 引数2 }}

ng-bindを使用する場合も|(バーティカルバー)を付けてフィルタ文字列を指定します。

				
<span ng-bind='変数  | フィルタ文字列'></span>

フィルタ文字列	説明
currency	金額形式で表示します。
number	数値形式で表示します。
date	日付形式で表示します。
json	Json文字列形式で表示します。
lowercase	小文字で表示します。
uppercase	大文字で表示します。
filter	指摘文字が含まれる場合のみ表示します。
orderBy	並び替えて表示します。
limitTo	表示するデータ数を指定できます。

配列フィルタ

				
<!DOCTYPE html>

<html>

<head>
	<meta charset="UTF-8">
	<title>AngularJS Test</title>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
	<!-- script src="angular.min.js"></script -->
	<script>
		var testApp = angular.module("testApp", []);

		function TestCtrl() {
			this.fruits = [
				{ name: 'strawberry',price: 200 },
				{ name: 'banana'    ,price: 178 },
				{ name: 'melon'     ,price: 500 },
				{ name: 'pineapple' ,price: 300 },
				{ name: 'grape'     ,price: 250 },
				{ name: 'pear'      ,price: 100 },
				{ name: 'peach'     ,price: 198 },
				{ name: 'apple'     ,price: 98 },
				{ name: 'cherry'    ,price: 298 }
			];
		}

		testApp.component("hello", {
			template: `<input ng-model="search" />
				<table>
					<tr><th>Name</th><th>price</th></tr>
					<tr ng-repeat="fruit in obj.fruits | orderBy:'price' | filter:search | limitTo:5 ">
						<td>{{fruit.name}}</td><td>{{fruit.price}}</td>
					</tr>
				</table>`,
			controller: TestCtrl,
			controllerAs: "obj"
		});
	</script>
</head>

<body ng-app="testApp">
	<hello></hello>
</body>

</html>

実行イメージ

上記の例では、priceでソート → 入力テキストでフィルタリング → 上位5個を表示の結果を表示しています。

ng-repeatはコレクションをループさせます。

ページのトップへ戻る