Angular.jsのカスタムフィルタを使ってみる

Angular.jsのカスタムフィルタを作成してみます。

文字列を反転して表示

入力した文字列を反転させて表示してみます。

HTML

<div ng-controller="ctrl">
	<input type="text" name="test" ng-model="test">
	<div>{{test | reverseFilter}}</div>
</div>

JavaScript

var app = angular.module('app', []);

app.filter('reverseFilter', [function () {
	return function (test) {
		return test.split('').reverse().join('');
	};
}]);

app.controller('ctrl', function($scope) {
	$scope.test= '';
});

文字列を反転して表示のデモページ
　

複数項目での絞り込み検索

ng-repeatで表示している内容を、入力値やselectで絞り込んで表示してみます。

HTML

<div ng-controller="ctrl">
	<input type="text" name="name" ng-model="name" placeholder="name">

	<select name="category" ng-model="category" ng-options="category.value as category.name for category in categories">
		<option value="">-----</option>
	</select>

	<select name="season" ng-model="season" ng-options="season.value as season.name for season in seasons">
		<option value="">-----</option>
	</select>

	<ul>
		<li ng-repeat="item in items | filter : originalFilter">
			<p>{{item.name}}</p>
			<div>
				<span ng-repeat="season in item.season">{{season}} </span>
			</div>
			<p>{{item.category}}</p>
		</li>
	</ul>
</div>

JavaScript

var app = angular.module('app', []);

app.controller('ctrl', function($scope) {
	$scope.name = '';
	$scope.category = '';
	$scope.season = '';

	// カスタムフィルタの処理
	$scope.originalFilter = function(value, index) {
		// すべての入力値が空の場合はすべて表示する
		if($scope.name === '' && $scope.category === '' && $scope.season === '') {
			return true; // 表示
		}

		// 各入力値と比較して、表示するかどうかを保存しておく変数
		var temp = {
			'name': '',
			'category': '',
			'season': ''
		}

		// nameの判定
		if($scope.name === '' || $scope.name === null) {
			temp['name'] = true;
		} else if(value.name.indexOf($scope.name) >= 0) {
			temp['name'] = true;
		} else {
			temp['name'] = false;
		}

		// categoryの判定
		if($scope.category === '' || $scope.category === null) {
			temp['category'] = true;
		} else if(value.category == $scope.category) {
			temp['category'] = true;
		} else {
			temp['category'] = false;
		}

		// seasonの判定
		if($scope.season === '' || $scope.season === null) {
			temp['season'] = true;
		} else {
			// 配列なので各値と入力値を比較する
			for (var i = 0; i < value.season.length; i++) {
				// 一致する場合はtrueに入れてfor文を終了する
				if(value.season[i] == $scope.season) {
					temp['season'] = true;
					break;
				} else {
					temp['season'] = false;
				}
			}
		}

		// 表示するかどうかの判定
		if(temp['name'] && temp['category'] && temp['season']) {
			return true; // 表示
		} else {
			return false; // 非表示
		}
	};

	// ng-repeatで使用しているデータ
	$scope.items = [
		{
			'name': 'SHIROBAKO',
			'category': 'オリジナル',
			'season': ['2014秋', '2015冬']
		},
		～ 略 ～
		{
			'name': 'Planetarian ～ちいさなほしのゆめ～',
			'category': 'ゲーム',
			'season': ['2016夏']
		}
	];

	$scope.categories = [
		{
			'name': 'オリジナル',
			'value': 'オリジナル'
		},
		～ 略 ～
		{
			'name': 'ゲーム',
			'value': 'ゲーム'
		}
	];

	$scope.seasons = [
		{
			'name': '2013秋',
			'value': '2013秋'
		},
		～ 略 ～
		{
			'name': '2016夏',
			'value': '2016夏'
		}
	];
});

各値を比較していって、一致する場合または値が空の倍はtrueになるようにしています。
複数項目での絞り込み検索のデモページ
　

【参考サイト】

• AngularJS： 配列の内容をフィルターするには？（filter） – Build Insider
• AngularJS： 自作の検索条件／比較ルールで配列を検索するには？（filter） – Build Insider