AngularJS 配列の中身を検索する"filterFilter"

こんにちは。piyohikoです。
初Qiita投稿です。お手柔らかにお願いします。

今回はAngularJSのfilterFilterという機能を紹介します。
割と便利なのにドキュメントがほとんどないので書いてみます。

filterFilterって？

簡単に言うと対象の配列内に任意の値があるかどうかを検索できます。
filterFilterを使わずに配列に任意の値があるかどうかを検索しようした場合

var array = ['aaa','bbb','ccc'];
var string = 'aaa';
var result = array.filter(function(value){
    return (value === string);
});
console.log(result);
//["aaa"]

とか

var array = ['aaa','bbb','ccc'];
var string = 'aaa';
var result = [];
array.forEach(function(value){
    if(value === string) result.push(value);
});
console.log(result);
//["aaa"]

みたいな感じになると思いますが、filterFilterを使うと

var array = ['aaa','bbb','ccc'];
var string = 'aaa';
var result = filterFilter(array, string);
console.log(result);
//["aaa"]

のようにループを書かずにスッキリ書くことができます。
使い方は、filterFilterをinjectし、第一引数に対象の配列、第二引数に検索したい値を指定します。
値があった場合は検索した値が入った配列が返却され、なければ空の配列が返却されます。

サンプル

サンプルコード
http://jsfiddle.net/2dB8b/9/

test.html

<div ng-app="app">
    <test-directive></test-directive>
</div>

test.js

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

var controller = function(filterFilter) {
    var array = ['aaa', 'bbb', 'ccc'];
    var objectArray = [
        {aaa: 'bbb'},
        {ccc: 'ddd'},
        {eee: 'fff'}
    ];
    this.result1 = filterFilter(array, 'aaa');
    this.result2 = filterFilter(array, 'ddd');
    this.result3 = filterFilter(objectArray, {aaa: 'bbb'});
    this.result4 = filterFilter(objectArray, 'bbb');
    this.result5 = filterFilter(objectArray, 'aaa');
    this.result6 = filterFilter(objectArray, 'ggg');
};
controller.$inject = ['filterFilter'];

var directive = function() {
    return {
        restrict: 'E',
        controller: controller,
        controllerAs: 'ctrl',
        bindToController: true,
        scope: {},
        template: '<div>'+
                    'result1: <span ng-bind="ctrl.result1 | json"></span>' + '<br>' +
                    'result2: <span ng-bind="ctrl.result2 | json"></span>' + '<br>' +
                    'result3: <span ng-bind="ctrl.result3 | json"></span>' + '<br>' +  
                    'result4: <span ng-bind="ctrl.result4 | json"></span>' + '<br>' +
                    'result5: <span ng-bind="ctrl.result5 | json"></span>' + '<br>' +
                    'result6: <span ng-bind="ctrl.result6 | json"></span>' + '<br>' +
                  '</div>'
    }
};

angular.module('app').directive('testDirective', directive);

以下のような表示になります。

result1:["aaa"]
result2:[]
result3:[{"aaa":"bbb"}]
result4:[{"aaa":"bbb"}]
result5:[]
result6:[]

以下のように、arrayにvalueがあったらhoge()するなんていうことも簡単に書けちゃいます。

var array = ['aaa','bbb','ccc'];
var value = 'aaa';
var hoge = function(){
    alert('hoge!');
};
if(filterFilter(array, value).length) hoge();

filterFilterの逆で指定した値以外が格納された配列を返す、みたいなやつってないのかな〜

備考

$filterでも同じことができるので、$filterをinjectしているときはfilterFilterを使わなくてもよさそうです。
https://jsfiddle.net/dL2ddfea/1/

test.html

<div ng-app="app">
    <test-directive></test-directive>
</div>

test.js

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

var controller = function($filter) {
    var array = ['aaa', 'bbb', 'ccc'];
    var objectArray = [
        {aaa: 'bbb'},
        {ccc: 'ddd'},
        {eee: 'fff'}
    ];
    this.result1 = $filter('filter')(array, 'aaa');
    this.result2 = $filter('filter')(array, 'ddd');
    this.result3 = $filter('filter')(objectArray, {aaa: 'bbb'});
    this.result4 = $filter('filter')(objectArray, 'bbb');
    this.result5 = $filter('filter')(objectArray, 'aaa');
    this.result6 = $filter('filter')(objectArray, 'ggg');
};
controller.$inject = ['$filter'];

var directive = function() {
    return {
        restrict: 'E',
        controller: controller,
        controllerAs: 'ctrl',
        bindToController: true,
        scope: {},
        template: '<div>'+
                    'result1: <span ng-bind="ctrl.result1 | json"></span>' + '<br>' +
                    'result2: <span ng-bind="ctrl.result2 | json"></span>' + '<br>' +
                    'result3: <span ng-bind="ctrl.result3 | json"></span>' + '<br>' +  
                    'result4: <span ng-bind="ctrl.result4 | json"></span>' + '<br>' +
                    'result5: <span ng-bind="ctrl.result5 | json"></span>' + '<br>' +
                    'result6: <span ng-bind="ctrl.result6 | json"></span>' + '<br>' +
                  '</div>'
    }
};

angular.module('app').directive('testDirective', directive);

result

result1:["aaa"]
result2:[]
result3:[{"aaa":"bbb"}]
result4:[{"aaa":"bbb"}]
result5:[]
result6:[]