Angular.jsでリストを複数の文字列で絞り込む

Angular.jsで検索するプロパティを指定して、複数の文字列でリストの絞り込みを行ってみます。

サンプルコード

文字列を2か所入力して、それぞれで絞り込みを行ってみます。

HTML

<div ng-controller="vaList">
	<div class="action-list">
		<input id="name" name="name" type="text" ng-model="search" placeholder="名前(ローマ字)" />
		<input id="name2" name="name2" type="text" ng-model="search2" placeholder="事務所" />
	</div>

	<ul class="va-list">
		<li class="va-list-item" ng-repeat="actor in actorData | filter:{ kana_en: search, belong: search2 }">
			<div class="va-list-item_name">{{actor.name}} <span class="va-list-item_belong">(所属:{{actor.belong}})</span></div>
			<div class="va-list-item_birthday">生年月日:{{actor.birthday}}</div>
		</li>
	</ul>
</div>

JavaScript

angular.module('app', []).controller('vaList', ['$scope', function($scope) {

	$scope.actorData = [
		{
			"name": "安済 知佳",
			"kana_en": "anzai chika",
			"kana_jp": "あんざい ちか",
			"birthday": "非公開",
			"belong": "エイベックス・ピクチャーズ"
		}, {
			"name": "高橋 李依",
			"kana_en": "takahashi rie",
			"kana_jp": "たかはし りえ",
			"birthday": "1994.2.27",
			"belong": "81プロデュース"
		},
		～ 略 ～
		{
			"name": "早見 沙織",
			"kana_en": "hayami saori",
			"kana_jp": "はやみ さおり",
			"birthday": "1991.5.29",
			"belong": "アイムエンタープライズ"
		}
	];
}]);

filter:{ key1: query1, key2: query2 }のようにすることで、keyでqueryと一致するものだけフィルタリングできます。
今回の場合、名前と事務所それぞれに文字列を指定して絞り込みを行うようにしています。
2か所入力して絞り込みのデモページ

サンプルコード2

文字列の入力と、複数あるタグから1つ選択して絞り込みしてみます。

HTML

<div ng-controller="vaList">
	<div class="action-list">
		<input id="name" name="name" type="text" ng-model="search" placeholder="検索" />
		<ul class="tag">
			<li><a href="" ng-click="clickBelong('アイムエンタープライズ')">アイムエンタープライズ</a></li>
			<li><a href="" ng-click="clickBelong('81プロデュース')">81プロデュース</a></li>
			<li><a href="" ng-click="clickBelong('ミュージックレイン')">ミュージックレイン</a></li>
			<li><a href="" ng-click="clickBelong('シグマ・セブン')">シグマ・セブン</a></li>
			<li><a href="" ng-click="clickBelong('大沢事務所')">大沢事務所</a></li>
			<li><a href="" ng-click="clickBelong('プロ・フィット')">プロ・フィット</a></li>
			<li><a href="" ng-click="clickBelong('東京俳優生活協同組合')">東京俳優生活協同組合</a></li>
			<li><a href="" ng-click="clickBelong('青二プロダクション')">青二プロダクション</a></li>
			<li><a href="" ng-click="clickBelong('スペースクラフト・エンタテインメント')">スペースクラフト・エンタテインメント</a></li>
		</ul>
	</div>

	<ul class="va-list">
		<li class="va-list-item" ng-repeat="actor in actorData | filter:{ $: search, belong: selectBelong }">
			<div class="va-list-item_name">{{actor.name}} <span class="va-list-item_belong">(所属:{{actor.belong}})</span></div>
			<div class="va-list-item_birthday">生年月日:{{actor.birthday}}</div>
		</li>
	</ul>
</div>

JavaScript

angular.module('app', []).controller('vaList', ['$scope', function($scope) {

	$scope.actorData = [
		{
			"name": "安済 知佳",
			"kana_en": "anzai chika",
			"kana_jp": "あんざい ちか",
			"birthday": "非公開",
			"belong": "エイベックス・ピクチャーズ"
		}, {
			"name": "高橋 李依",
			"kana_en": "takahashi rie",
			"kana_jp": "たかはし りえ",
			"birthday": "1994.2.27",
			"belong": "81プロデュース"
		},
		～ 略 ～
		{
			"name": "早見 沙織",
			"kana_en": "hayami saori",
			"kana_jp": "はやみ さおり",
			"birthday": "1991.5.29",
			"belong": "アイムエンタープライズ"
		}
	];

	$scope.selectBelong = '';
	$scope.clickBelong = function(belong) {
		$scope.selectBelong = belong;
	};
}]);

先ほどはkeyごとに絞り込みをする文字列を指定していましたが、key部分に$を使うと全体からのフィルタリングになります。
今回の場合、belongで絞り込みをする文字列を選択 + 文字列を入力して全体から絞り込みを行うようにしています。
タグ選択と文字入力で絞り込みのデモページ

【参考サイト】

• AngularJS： 配列の内容をフィルターするには？（filter） – Build Insider