吉本集の個人ブログ
Web制作の技術について書いています。たまに日記も書きます。

filter機能(基本)

2013年12月11日 / category : angularjs, filter, lab

filter機能の基本的な使い方をまとめます。
パターンは大きく分けて、9パターンあります。

A: number

配列に格納されている値の中で数値だけを取得する。

■HTML – index.html
<div class="wrap" ng-controller="Ctrl">
<ul ng-repeat="item in items">
<li>
value : {{item.value | number}}
</li>
</ul>
</div>
■JavaScript – app.js
var myApp = angular.module('app', []);

myApp.controller('Ctrl', ['$scope', function($scope){
	$scope.num = 200;
	$scope.items = [
		{value: 100},
		{value: 'あいうえお'},
		{value: $scope.num}
	];
}]);
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/12/0/
■解説
AngularJSの変数を代入する{{value}}の中に、フィルターのコードを追加します。

{{value | filter}}

これが基本的なカタチです。
サンプルでは、変数の型が数値の変数のみ取得するフィルターをかけています。

{{item.value | number}}

これで、文字列などの数値以外の変数は省かれます。

数値に対し、小数点を指定することができます。

■HTML – index.html
<div class="wrap" ng-controller="Ctrl">
<ul ng-repeat="item in items">
<li>
value : {{item.value | number:0}}
</li>
</ul>
</div>
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/12/1/
■解説
{{item.value | number:0}}

number:0という記述で、小数点の位置を変更することができます。

B: date

取得した時間を任意の形式にするフィルター

■HTML – index.html
<div class="wrap" ng-controller="Ctrl">

<dl>
<dt>date:'medium'</dt>
<dd>{{nowDate | date:'medium'}}</dd>
</dl>

<dl>
<dt>date:'yyyy-MM-dd HH:mm:ss Z'</dt>
<dd>{{nowDate | date:'yyyy-MM-dd HH:mm:ss Z'}}</dd>
</dl>

<dl>
<dt>date:'MM/dd/yyyy @ h:mma'</dt>
<dd>{{nowDate | date:'MM/dd/yyyy @ h:mma'}}</dd>
</dl>

</div>
■JavaScript – app.js
var myApp = angular.module('app', []);

myApp.controller('Ctrl', ['$scope', function($scope){
	$scope.nowDate = new Date();
}]);
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/12/4/

C: json

json形式にするフィルター

■HTML – index.html
<div class="wrap" ng-controller="Ctrl">
<p>{{items | json}}</p>
</div>
■JavaScript – app.js
var myApp = angular.module('app', []);

myApp.controller('Ctrl', ['$scope', function($scope){
	$scope.items = [
		{title:'タイトルA', value: 100},
		{title:'タイトルB', value: 200},
		{title:'タイトルC', value: 300}
	];
}]);
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/12/5/

D: lowercase / uppercase

取得した値にlowercase/uppercase変換するフィルター

■HTML – index.html
<div class="wrap" ng-controller="Ctrl">

<dl>
<dt>ABCDEFG</dt>
<dd>output : {{'ABCDEFG' | lowercase}}</dd>
</dl>

<dl>
<dt>abcdefg</dt>
<dd>output : {{'abcdefg' | uppercase}}</dd>
</dl>

</div>
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/12/7/

E: limitTo

取得した値にリミットをかけるフィルター

■HTML – index.html
<div class="wrap" ng-controller="Ctrl">

<dl>
<dt>[0,1,2,3,4,5,6,7,8,9]</dt>
<dd><input type="text" ng-model="numLimit"></dd>
<dd>output : {{nums | limitTo:numLimit}}</dd>
</dl>

<dl>
<dt>あいうえお</dt>
<dd><input type="text" ng-model="strLimit"></dd>
<dd>output : {{str | limitTo:strLimit}}</dd>
</dl>

</div>
■JavaScript – app.js
var myApp = angular.module('app', []);

myApp.controller('Ctrl', ['$scope', function($scope){
	$scope.nums = [0,1,2,3,4,5,6,7,8,9];
	$scope.str = 'あいうえお';
	$scope.numLimit = 3;
	$scope.strLimit = 3;
}]);
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/12/6/

F: orderBy

指定した属性に応じてソートするフィルター

■HTML – index.html
<div class="wrap" ng-controller="Ctrl">

<table>
<tr>
<th><a href ng-click="mode='name'; reverse=false">name</a>(<a href ng-click="mode='-name'; reverse=false">^</a>)</th>
<th><a href ng-click="mode='phone'; reverse=!reverse">phone</a></th>
<th><a href ng-click="mode='age'; reverse=!reverse">age</a></th>
</tr>
<tr ng-repeat="item in items | orderBy:mode:reverse">
<td>{{item.name}}</td>
<td>{{item.phone}}</td>
<td>{{item.age}</td>
</tr>
</table>

<p><a href ng-click="mode=''">元に戻す</a></p>
<br>
<p>mode = {{mode}}; reverse = {{reverse}}</p>

</div>
■JavaScript – app.js
var myApp = angular.module('app', []);

myApp.controller('Ctrl', ['$scope', function($scope){
	$scope.items = [
		{name:'aaa', phone:'090-999-999', age:20},
		{name:'bbb', phone:'090-888-888', age:30},
		{name:'ccc', phone:'090-444-444', age:80},
		{name:'ddd', phone:'090-666-666', age:45},
		{name:'eee', phone:'090-333-333', age:64},
		{name:'fff', phone:'090-000-000', age:56},
		{name:'ggg', phone:'090-222-222', age:16},
		{name:'hhh', phone:'090-111-111', age:62}
	];
	$scope.mode = '-age';
}]);
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/12/8/

G: filter

指定した文字列を検索するフィルター

■HTML – index.html
<div class="wrap" ng-controller="Ctrl">

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

<table>
<tr ng-repeat="item in items | filter:searchText">
<td>{{item.name}}</td>
<td>{{item.phone}}</td>
<td>{{item.age}}</td>
</tr>
</table>

</div>
■JavaScript – app.js
var myApp = angular.module('app', []);

myApp.controller('Ctrl', ['$scope', function($scope){
	$scope.items = [
		{name:'aaa', phone:'090-999-999', age:20},
		{name:'bbb', phone:'090-888-888', age:30},
		{name:'ccc', phone:'090-444-444', age:80},
		{name:'ddd', phone:'090-666-666', age:45},
		{name:'eee', phone:'090-333-333', age:64},
		{name:'fff', phone:'090-000-000', age:56},
		{name:'ggg', phone:'090-222-222', age:16},
		{name:'hhh', phone:'090-111-111', age:62}
	];
}]);
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/12/9/

指定した文字列を検索するフィルター(細かく指定する)

■HTML – index.html
<div class="wrap" ng-controller="Ctrl">

<p>all search : <input type="text" ng-model="search.$"></p>
<p>name search : <input type="text" ng-model="search.name"></p>
<p>phone search : <input type="text" ng-model="search.phone"></p>
<p>strict <input type="checkbox" ng-model="strict"></p>

<table>
<tr ng-repeat="item in items | filter:search:strict">
<td>{{item.name}}</td>
<td>{{item.phone}}</td>
<td>{{item.age}}</td>
</tr>
</table>

</div>
■JavaScript – app.js
var myApp = angular.module('app', []);

myApp.controller('Ctrl', ['$scope', function($scope){
	$scope.items = [
		{name:'aaa', phone:'090-999-999', age:20},
		{name:'bbb', phone:'090-888-888', age:30},
		{name:'ccc', phone:'090-444-444', age:80},
		{name:'ddd', phone:'090-666-666', age:45},
		{name:'eee', phone:'090-333-333', age:64},
		{name:'fff', phone:'090-000-000', age:56},
		{name:'ggg', phone:'090-222-222', age:16},
		{name:'hhh', phone:'090-111-111', age:62}
	];
}]);
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/12/10/

H: currency

数値を通貨に変換するフィルター

■HTML – index.html
<div class="wrap" ng-controller="Ctrl">
<ul ng-repeat="item in items">
<li>
value : {{item.value | currency}}
</li>
</ul>
</div>
■JavaScript – app.js
var myApp = angular.module('app', []);

myApp.controller('Ctrl', ['$scope', function($scope){
	$scope.num = 300.55;
	$scope.items = [
		{value: 100.2},
		{value: 200.05},
		{value: $scope.num}
	];
}]);
■サンプルURL
http://tsudoi.org/javascript/angularjs/Reference/Blog/12/3/