AngularJS Check/Uncheck All checkboxes from ng-repeat object array

Question

I've a table in which each row has checkbox and another checkbox in to check-all rows (checkboxes) and send ID of selected/all row(s) as JSON object.

I've an object array from (GET) response (server-side pagination is enabled) and stored it in itemsList $scope variable.

Following is my code.

View

<table class="table">
    <thead>
        <tr>
            <th><input type="checkbox" ng-model="allItemsSelected ng-change="selectAll()"></th>
            <th>Date</th>
            <th>ID</th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="item in itemsList track by $index" ng-class="{selected: item.isChecked}">
            <td>
                <input type="checkbox" ng-model="item.isChecked" ng-change="selectItem(item)">
            </td>
            <td>{{item.date | date:'dd-MM-yyyy'}}</td>
            <td>{{item.id}}</td>
        </tr>
    </tbody>
</table>

Controller

$scope.itemsList = [
    {
        id : 1,
        date : '2019-04-04T07:50:56'
    },
    {
        id : 2,
        date : '2019-04-04T07:50:56'
    },
    {
        id : 3,
        date : '2019-04-04T07:50:56'
    }
];
$scope.allItemsSelected = false;
$scope.selectedItems = [];

// This executes when entity in table is checked
$scope.selectItem = function (item) {

    // If any entity is not checked, then uncheck the "allItemsSelected" checkbox
    for (var i = 0; i < $scope.itemsList.length; i++) {
        if (!this.isChecked) {
            $scope.allItemsSelected = false;
            // $scope.selectedItems.push($scope.itemsList[i].id);
            $scope.selectedItems.push(item.id);
            return
        }
    }

    //If not the check the "allItemsSelected" checkbox
    $scope.allItemsSelected = true;

};

// This executes when checkbox in table header is checked
$scope.selectAll = function() {

    // Loop through all the entities and set their isChecked property
    for (var i = 0; i < $scope.itemsList.length; i++) {
        $scope.itemsList[i].isChecked = $scope.allItemsSelected;

        $scope.selectedItems.push($scope.itemsList[i].id);
    }

};

Below are the issues I'm facing...

If you check fiddle example than you can see that on checkAll() the array is updated with all available list. But if click again on checkAll() instead of remove list from array it again add another row on same object array.
Also i want to do same (add/remove from array) if click on any row's checkbox
If i manually check all checkboxes than the thead checkbox should also be checked.

@rahim.nagori already did, please check all the way top in question... — Umair Dev
– Umair Dev, Commented Apr 9, 2019 at 11:25

MSclavi · Accepted Answer · 2019-04-13 01:43:30Z

0

I think that you are on the right path. I don't think is a good idea to have an array only for the selected items, instead you could use the isSelected property of the items. Here is a working fiddle: http://jsfiddle.net/MSclavi/95zvm8yc/2/.

If you have to send the selected items to the backend, you can filter the items if they are checked with

var selectedItems = $scope.itemsList.filter(function (item) {
    return !item.isChecked;
});

Hope it helps

answered Apr 13, 2019 at 1:43

MSclavi

4272 silver badges10 bronze badges

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

Comments

rahim.nagori · Accepted Answer · 2019-04-16 14:45:08Z

0

This will help you for one of the two doubts:

$scope.selectAll = function() {
    if($scope.allItemsSelected){
        for (var i = 0; i < $scope.itemsList.length; i++) {
            $scope.itemsList[i].isChecked = $scope.allItemsSelected;
            $scope.selectedItems.push($scope.itemsList[i].id);
        }
    }else{
        for (var i = 0; i < $scope.itemsList.length; i++) {
            scope.itemsList[i].isChecked = $scope.allItemsSelected;
        }
        $scope.selectedItems = [];
    }
};

I'm looking for something to achieve solution to point 2. ng-checked can be used but it is not good to use ng-checked with ng-model.

answered Apr 16, 2019 at 14:45

rahim.nagori

6668 silver badges20 bronze badges

Collectives™ on Stack Overflow

AngularJS Check/Uncheck All checkboxes from ng-repeat object array

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