Angular checkbox filtering

Question

Im trying to write a custom filter to filter by some checkboxes but havent had any luck, Ive found a solutions here but do not but none fit - would there be a alternative way of writing this checkbox functionality - have I structured this this Angular app incorrectly??

I recreated my little angular app in jsfiddle here (http://jsfiddle.net/samstimpson/vorg019v/):

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

someApp.factory('searchFactory', function(){
    return { query: "" }
});

someApp.factory('checkboxFactory', function() {
    var checkboxFactory = [
        { name: 'item 1', item: 1 },
        { name: 'item 2', item: 2 },
        { name: 'item 3', item: 3 }
    ];
    return checkboxFactory;
});

someApp.factory('listFactory', function() {
    var listFactory = [
        { name: 'list item 01', item: 1 },
        { name: 'list item 02', item: 2 },
        { name: 'list item 03', item: 3 },
        { name: 'list item 04', item: 1 },
        { name: 'list item 05', item: 2 },
        { name: 'list item 06', item: 3 },
        { name: 'list item 07', item: 1 },
        { name: 'list item 08', item: 2 },
        { name: 'list item 09', item: 3 },
        { name: 'list item 10', item: 1 }
    ];
    return listFactory;
});

someApp.filter('filterByCategory', function($filter) {
    return function(listItems) {
        console.log(listItems);
    };
});

someApp.controller('checkboxCtrl', ['$scope','checkboxFactory', 'searchFactory', function($scope, checkboxFactory, searchFactory) {
    $scope.checkboxes = checkboxFactory;
    $scope.search = searchFactory;
}]);

someApp.controller('listCtrl', ['$scope','listFactory','searchFactory', function($scope, listFactory, searchFactory) {
    $scope.listItems = listFactory;
    //console.log(search);
    $scope.search = searchFactory;
}]);

I see Ive got a minus -1 with no comment - please explain the reason so I do not do it in the future. — Iamsamstimpson
– Iamsamstimpson, Commented Oct 15, 2014 at 9:42
I don't understand what you want to achieve with your chexboxes — wintenbb
– wintenbb, Commented Oct 15, 2014 at 14:31
I want to filter the list by the checkboxes, so if you check item 1 and item 2 only item 1 and item 2 will show in the list. — Iamsamstimpson
– Iamsamstimpson, Commented Oct 15, 2014 at 14:33

wintenbb · Accepted Answer · 2014-10-16 06:30:25Z

2

You need to add a couple of things.

First store the fact that a box is selected in your model :

<input type="checkbox" ng-model="checkbox.selected"/>

Then define your filterByCategory to filter :

someApp.filter('filterByCategory', function() {
    return function(input, checkboxes) {
        console.log(input, checkboxes);
        var ret =[];
        for (var i in input){
            var match = false;
            for (var j in checkboxes){
                if (checkboxes[j].selected && checkboxes[j].item == input[i].item){
                   ret.push(input[i]);   
                }
            }
        }
        if (ret.length > 0){
            return ret;
        } else {
            return input;
        }
    };
});

Some explanations about this filter : a filter function can take n arguments, the first one is the array to filter and the following (arg1, arg2, ...) are parameters you used.

array | filterName:arg1:arg2

We want to filter the listItems with the checkboxes, that's why I'm doing that

Then you need to let your ListController be aware of checkboxes :

someApp.controller('listCtrl', ['$scope','checkboxFactory','listFactory','searchFactory', function($scope, checkboxFactory,listFactory, searchFactory) {
$scope.checkboxes = checkboxFactory;

And finally use your filter in the list :

<li ng-repeat="item in listItems | filter: search.query | filterByCategory : checkboxes">
    {{ item.name }}
</li>

All these modifications are available on the fiddle : http://jsfiddle.net/vorg019v/2/

edited Oct 16, 2014 at 6:30

answered Oct 15, 2014 at 14:57

wintenbb

4,1663 gold badges32 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Iamsamstimpson Over a year ago

Thank you so much - Ill try now - This was the type of answer I was looking for thank you. Ill report back shortly.

Iamsamstimpson Over a year ago

Thats really cool I was trying as well - now I can see why mine was going wrong! thank you very much for the help so far

Iamsamstimpson Over a year ago

just a quick question what does the input in ' return function(input, checkboxes) {' refer to and how?

Iamsamstimpson Over a year ago

When I try to implement it, it seems to not pass in the selected checkbox - so festivals[j].selected fails.. anyhelp?

wintenbb Over a year ago

I have added some explanations about the filter function in the answer. What is festivals ?

Collectives™ on Stack Overflow

Angular checkbox filtering

1 Answer 1

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related