AngularJS ng-repeat with checkbox and filter

Question

I have ng-repeat list, and I need to filter that list with checkbox. In checkbox I have three value, ERROR, WARNING, SUCCESS. If I check ERROR, show only error, if I check ERROR and WARNING show error and warning, same with success. But problem is, when I check ERROR box, list show only data with error, but when I check WARNING, they show all data in list, not only ERROR and WARNING data. For better explanation here is

> http://jsfiddle.net/ADukg/12574/

Answer 1

It's because of your toggleFilter() function

 $scope.toggleFilter= function(filterValues) {
    if ($scope.filterValue == undefined) {
        $scope.filterValue = filterValues;
    } else {
        delete $scope.filterValue;
    }
};

What is does:

• When there is no filter, set the selected filter
• When there is a filter, delete the current filter

So when you check ERROR, it sets ERROR as filter, but when you then click WARNING too, it triggers the else , and removes the current selection.

---

When you change your else to:

else {
    delete $scope.filterValue;
    console.log($scope.filterValue);
}

You can see it logs undefined when selecting more than 1 filter.

Answer 2

Because there is no any solution for this, here is my code how I fix this.

<div class="nav">
                <div ng-repeat="filter in filters" ng-class="{sel: selection.indexOf(filterValue) == selected}">
                    <span class="filters_ct_status"></span>
                    <div ng-repeat="filterValue in filter.lists" style="float:left; padding: 5px">
                            <input type="checkbox" value="{{filterValue}}" ng-model="checked" ng-checked="selection.indexOf(filterValue) > -1" ng-click="toggleSelection(filterValue)">
                            <img ng-if="filterValue == 'Success'" src="assets/img/success.png" alt="success"/>
                            <img ng-if="filterValue == 'Warning'" src="assets/img/warning.png" alt="warning"/>
                            <img ng-if="filterValue == 'Error'" src="assets/img/error.png" alt="Error"/>
                    </div>
                </div>
            </div>
            <div class="table_bench_info logBox" style="overflow-y: auto; height: 250px;">
                <div class="list" ng-repeat="list in lists">
                    <span ng-if="listaFiltera.indexOf(list.class) !== -1">{{list.description}}</span>
                </div>

            </div>

and there is controller

        $scope.filterValue = [];
    // toggle selection for a given employee by name
    $scope.toggleSelection = function(valueFilter) {
    var idx = $scope.filterValue.indexOf(valueFilter);
    if (idx > -1) {
         $scope.filterValue.splice(idx, 1);
        if($scope.filterValue.length == 0){
            return $scope.listaFiltera = ['Error','Warning','Success'];
        }else{

        $scope.listaFiltera = $scope.filterValue.map(function(x) {
        return x;
    });

    }
    } else {
        $scope.filterValue.push(valueFilter);
        $scope.listaFiltera = $scope.filterValue.map(function(x) {
        return x;
        });
 }
};

 $scope.filters = [
        {   
            lists: ['Error','Warning','Success']
        }
    ];

We need push checked checkboxes to the array. And splice unchecked checkboxes from the array. Also, we need to check $scope.filterValue.length if we want multiple filters.