Browse By

Data filtering based on multiple checkboxes in AngularJs. [HowTo]

Ok, this is just a quick post with some small pieces of code which shows how to filter data, to be precise a json object and present them in view. As you already know AngularJs is powerfull stuff, and this lines of code prooves that one more time. Have a look:

First the html:

<html ng-app="myApp">
<script type="text/javascript" src=""></script>
<script type='text/javascript' src="car.js"></script>
<body style="font-family:Verdana; font-size:14px;">
<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 style="clear:both;"></div>
			<li  ng-repeat="car in cars | filter:filterMakes()"><p><b>{{car.make}} - {{car.model}}</b></p></li>

And the javascript below:

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 == $[i] && $scope.useMakes[i]) {
                    return true;
    $ = [
        {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) {
    return result;

            function () {
                return function (collection, key) {
                    if (collection === null) return;
                    return uniqueItems(collection, key);

So as you can see the most important part is the creation of the filter groupBy. By creating this filter we can add it in the ng-repeat like this ng-repeat=”car in cars | filter:filterMakes()” and it checks each car in the json object.


angularjs checkbox filterSee it live here:


2 thoughts on “Data filtering based on multiple checkboxes in AngularJs. [HowTo]”

Leave a Reply

Your email address will not be published. Required fields are marked *