Super Filter

adding multiple dynamic filters on a collection

by bodine30

HTML

<script src="https://dl.dropboxusercontent.com/u/10178518/data/people.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.8/angular.js"></script>
<div ng-app="myApp">
    <div ng-controller="MyCtrl">
        <super-filter model="people" filters="['gender', 'eyeColor', 'isActive']"></super-filter>
        <div class="results" ng-if="searchText">
            
        </div>
        <input ng-model="searchText.$" ng-model-options="{ updateOn: 'default blur', debounce: {'default': 500, 'blur': 0} }"/>
            <pre ng-repeat="person in people | filter:searchText"><code ng-class="{'male':person.gender == 'male','female':person.gender == 'female'}">{{person | json}}</code></pre>
    </div>
</div>

CSS

.male {
    background:lightblue;
}
.female {
    background:pink;
}

JavaScript

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

app.controller('MyCtrl', function($scope) {
    $scope.current = {"filters":[]};
    $scope.filters = [
        {"id":"1", "name":"Filter A"},
        {"id":"2", "name":"Filter B"},
        {"id":"3", "name":"Filter C"},
        {"id":"4", "name":"Filter D"}
    ];
    $scope.people = window.people.reverse();
    
    $scope.addFilter = function() {
        $scope.current.filters.push({ });
    };
});

app.directive('superFilter', function($compile, $parse, $filter){
    return {        
        terminal:true,
        compile: function sfCompile(tElement, tAttrs, uhh){
            var input = angular.element("<input ng-model=\"superSearch\"/>");
            var list = angular.element("<div ng-repeat=\"item in "+tAttrs.model+"\">{{item.name}} - {{item.gender}} - {{item.eyeColor}} - {{item.isActive}}</div>");
            var filters = angular.element("<span ng-repeat=\"filter in filters\">{{filter.key}} - {{filter.value}}</span>");
            var f = $parse(tAttrs.filters);
            tElement.append(input);
            tElement.append(list);
            tElement.append(filters);
            //tElement.prepend(f);
            
            return function sfLink(scope, iElement, iAttrs) {
                scope.f = f(scope);
                iElement.prepend(angular.element("<span>{{f.length}}</span>"));
                $compile(iElement.contents())(scope);
            }
        }
    }
})