Checkbox Filter Sample

by Erin

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<div data-ng-app="checkboxFilteringTest" data-ng-controller="mainCtrl">
    <input type="checkbox" data-ng-click="sortAnimal('cat')">Cat</input>
    <input type="checkbox" data-ng-click="sortAnimal('dog')">Dog</input>
    <ul>
        <li data-ng-repeat="animal in animals | filter:animalFilter">{{animal.name}}</li>
    </ul>
</div>

JavaScript

// main app module
var app = angular.module('checkboxFilteringTest', []);

// main controller
app.controller('mainCtrl', ['$scope', function ($scope) {
    $scope.animals = [
        {
            'name': 'Persian Cat',
            'type': 'cat'
        },
        {
            'name': 'British Shorthair',
            'type': 'cat'
        },
        {
            'name': 'Siamese Cat',
            'type': 'cat'
        },
        {
            'name': 'Labrador Retriever',
            'type': 'dog'
        },
        {
            'name': 'German Shepard',
            'type': 'dog'
        },
        {
            'name': 'Bulldog',
            'type': 'dog'
        }
    ];
    $scope.animalList = [];
    $scope.sortAnimal = function(animalType) {
        var i = $.inArray(animalType, $scope.animalList);
        if (i > -1) {
            $scope.animalList.splice(i, 1);
        } else {
            $scope.animalList.push(animalType);
        }
    };
    $scope.animalFilter = function(animals) {
        console.log(animals);
        if ($scope.animalList.length > 0) {
            if ($.inArray(animals.type, $scope.animalList) < 0)
                return;
        }     
        return animals;
    };
}]);