Angular Filter with checkboxes

Question

I have a table with a checkbox in each row.

My tr row as below

<tr ng-repeat="row in rows | filter:searchFilter" >

The checkbox in each row as below

<input type="checkbox"  value="{{row.id}}" ng-checked="selection.indexOf(row.id) > -1" ng-click="toggleSelection(row.id)" class="chosenRouteCheckbox">

And I have an input text as below

<input type="text" ng-model="searchFilter"/>

I have an array of row ids to keep tracked to ensure that they are checked if they are in the array, explaining why I use the indexOf(row.id) > -1 in the input checkbox.

However, when I type something in the input text, it shows correctly the filtered results, but when I click on a button that checks all the input checkboxes, it does not check the filtered ones only, it checks ALL the input checkboxes.

My check all html as below

<a class="btn btn-info pull-right" style="cursor:pointer" ng-click="checkAllRows()" ng-show="all_rows_checked == false">Check All Rows</a>
<a class="btn btn-info pull-right" style="cursor:pointer" ng-click="checkAllRows()" ng-show="all_rows_checked == true">Uncheck All Rows</a>

My check all function as below

 $scope.checkAllRows = function () {
     $scope.all_rows_checked = !$scope.all_rows_checked;
     if ($scope.all_rows_checked == true) {
         for (var i = 0; i < $scope.rows.length; i++) {
             $scope.selection.push($scope.rows[i].id);
         }
     } else {
         $scope.selection = [];
     }
 }

Thanks in advance if anyone can help me!

need a clearer description of the end result UI you are going after. To much effort trying to understand the nuance of what you are after. — jamie
– jamie, Commented Feb 17, 2015 at 4:37

dfsq · Accepted Answer · 2015-02-16 12:03:07Z

3

You will need to save filtered array in one more variable and use this reduced array in checkAllRows function to determine if current row needs to be checked:

$scope.checkAllRows = function() {
    $scope.all_rows_checked = !$scope.all_rows_checked;
    if ($scope.all_rows_checked) {
        for (var i = 0; i < $scope.rows.length; i++) {
            if ($scope.filtered.indexOf($scope.rows[i]) > -1) {
                $scope.selection.push($scope.rows[i].id);    
            }
        }
    } else {
        $scope.selection = [];
    }
}

HTML:

<tr ng-repeat="row in filtered = (rows | filter:searchFilter)">

Demo: http://plnkr.co/edit/EQKojsUV8yUqKKUaTq1N?p=preview

answered Feb 16, 2015 at 12:03

dfsq

193k26 gold badges244 silver badges261 bronze badges

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

Comments

manasi sakhare · Accepted Answer · 2015-02-16 12:09:19Z

0

If all you need to do is check all the check boxes, then why not just write the input checkboxes per row as below:

<input type="checkbox"  value="{{row.id}}" ng-checked="all_rows_checked == true" ng-click="toggleSelection(row.id)" class="chosenRouteCheckbox">

And in your checkAllRows function just do this:

$scope.checkAllRows = function(){
    $scope.all_rows_checked = !$scope.all_rows_checked;

}

answered Feb 16, 2015 at 12:09

manasi sakhare

1,0517 silver badges18 bronze badges

Collectives™ on Stack Overflow

Angular Filter with checkboxes

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related