StackOverflow_23983322: angularjs-checkbox-filter

Illustration of answer to http://stackoverflow.com/questions/23983322/angularjs-checkbox-filter.

by manoj

HTML

<script src="http://code.angularjs.org/1.2.16/angular.min.js"></script>
<div ng-controller="myCtrl">
    <b>Category:</b>
    <div ng-repeat="cat in getCategories()">
        <b><input type="checkbox" ng-model="filter[cat]" /> {{cat}}</b>
    </div>
    <hr />
    <div ng-repeat="w in filtered=(wines | filter:filterByCategory)">
        {{w.name}} ({{w.category}})
    </div>
    <hr />
    Number of results: {{filtered.length}}
</div>

JavaScript

var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
    $scope.wines = [
        { name: "Wine A", category: "red" },
        { name: "Wine B", category: "red" },
        { name: "wine C", category: "white" },
        { name: "Wine D", category: "red" },
        { name: "Wine E", category: "red" },
        { name: "wine F", category: "white" },
        { name: "wine G", category: "champagne"},
        { name: "wine H", category: "champagne" }    
    ];
    $scope.filter = {};

    $scope.getCategories = function () {
        return ($scope.wines || []).map(function (w) {
            return w.category;
        }).filter(function (w, idx, arr) {
            return arr.indexOf(w) === idx;
        });
    };
    
    $scope.filterByCategory = function (wine) {
        return $scope.filter[wine.category] || noFilter($scope.filter);
    };
    
    function noFilter(filterObj) {
        for (var key in filterObj) {
            if (filterObj[key]) {
                return false;
            }
        }
        return true;
    }            
});