AngularJS - Filter multiselect

Question

Im using $filter to filter my array.

var filteredData = params.filter() ?
    $filter('filter')($scope.myNgTable.data, params.filter()):
    $scope.myNgTable.data;

I created a multiple select filter, to filter by, but it returns an array: col: ["a","b"], which does not work with $filter for what I see.

I want when the filter is col: ["a","b"] it would show all rows with col contains "a" or col contains "b". (if there is only a way for equal that s fine: col == "a" or col == "b")

Is that possible?

Answer:

.filter("in_Array", function ($filter){
    return function(data, filter){
        var out = [];
        $.each(filter, function(key,val) {
            var obj = {};
            for(var i=0;i<val.length;i++) {
                obj[key] = val[i];
                var tmp = $filter('filter')(data, obj);
                out = $.unique($.merge(out, tmp));
            }
        });
        return out;
    };
});

Answer 1

Look this example. This use the multi filter when click in checkbox

http://jsfiddle.net/rzgWr/123/

HTML:

 <div ng-controller="MyCtrl">
        <h4>Pick a brand to see the models</h4>
        <div ng-init="group = (cars | groupBy:'make')" style="width:100%">
            <div ng-repeat="m in group"   style="width:100px; float:left;">
                <b><input type="checkbox" ng-model="useMakes[$index]"/>{{m}}</b>
            </div>
        </div>
        <div style="clear:both;"></div>
        <div>
            <ul>
                <li  ng-repeat="car in cars | filter:filterMakes()"><p><b>{{car.make}} - {{car.model}}</b></p></li>
            </ul>    
        </div>
    </div>

JS:

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

function MyCtrl($scope, filterFilter) {
    $scope.useMakes = [];

    $scope.filterMakes = function () {
        return function (p) {
            for (var i in $scope.useMakes) {
                if (p.make == $scope.group[i] && $scope.useMakes[i]) {
                    return true;
                }
            }
        };
    };

    $scope.cars = [
        {model: '316', make: 'Bmw'},
        {model: '520', make: 'Bmw'},
        {model: 'Fiesta', make: 'Ford'},
        {model: 'Focus', make: 'Ford'},
        {model: 'Clio', make: 'Renault'},
        {model: 'Toledo', make: 'Seat'},
        {model: 'Leon', make: 'Seat'},
        {model: 'Insignia', make: 'Opel'},
        {model: 'Astra', make: 'Opel'},
        {model: 'Corsa', make: 'Opel'}
    ];    
}


var uniqueItems = function (data, key) {
    var result = new Array();
    for (var i = 0; i < data.length; i++) {
        var value = data[i][key];

        if (result.indexOf(value) == -1) {
            result.push(value);
        }

    }
    return result;
};

myApp.filter('groupBy',
function () {
    return function (collection, key) {
        if (collection === null) return;
        return uniqueItems(collection, key);
    };
});