Checkbox check/uncheck not working properly with angularjs

Question

I am working on a project where I am using a partial view in ASP.NET MVC and in that partial view there is a html table and in the table header there is a checkbox on click of that checkbox all the checkboxes besides the table body data should be checked and if from table body data any checkbox is unchecked then top header checkbox should be also unchecked. This functionality is working with my current code but it is working only once second time if I uncheck top header checkbox and check it again and try to uncheck any table body data checkbox top header checkbox is not getting unchecked I am not able to figure out why this is not working

Here is my code

<table class="table table-condensed table-bordered table-hover left" style="width:100%;margin:0px;">
    <thead>
        <tr>
            <th>
                <input type="checkbox" style="margin: 3px 0;" ng-model="IsAllChecked" ng-change="CheckUncheckAll(IsAllChecked)" ng-checked="isChecked"/>
            </th>
            <th><label>Name</label></th>
            <th><label>City</label></th>
            <th><label>Country</label></th>
        </tr>
    </thead>

    <tr ng-repeat="clientData in $Clients.Clients| orderBy:'Name'|limitTo: totalDisplayed | filter: searchClient"
        ng-mouseover="MouseOverOnUnassigned(clientData );" ng-mouseleave="MouseLeaveOnUnassigned(clientData)">

        <td>
 
            <input type="checkbox" ng-model="clientData.IsSelectedClients" ng-change="CheckUncheckHeader(clientData.IsSelectedClients)" />
        </td>
        <td>{{clientData.Client}}</td>
        <td>{{clientData.City}}</td>
        <td>{{clientData.Country}}</td>       
    </tr>
</table>

And my angular js code

$scope.CheckUncheckHeader = function (checked) {
    $scope.isChecked = true;
    for (var i = 0; i < $scope.$Client.Clients.length; i++) {
        if (!$scope.$Client.Clients[i].IsSelectedClients) {
            $scope.isChecked = false;
            break;
        }
    };
};

$scope.CheckUncheckAll = function (IsAllChecked) {
    for (var i = 0; i < $scope.$Client.Clients.length; i++) {
        $scope.$Client.Clients[i].IsSelectedClients= IsAllChecked;
    }
};

Can anybody tell what is the best way to achieve this without failing. Thanks in advance

Does stackoverflow.com/questions/20968170/… answer your question? — Harkirat singh
– Harkirat singh, Commented Jun 20, 2021 at 14:23
@Harkiratsingh no this is inside loop ng-repeat i want different one see my code — aditya khot
– aditya khot, Commented Jun 21, 2021 at 2:48

Thomson Mixab · Accepted Answer · 2021-06-21 03:06:22Z

0

Please, try with below code. Good Luck

$scope.CheckUncheckAll = function (IsAllChecked) {
    for (var i = 0; i < $scope.$Client.Clients.length; i++) {
        if(IsAllChecked == true) 
        {
            $scope.$Client.Clients[i].IsSelectedClients= true;
            $scope.isChecked = true;
        } else 
        {
           $scope.$Client.Clients[i].IsSelectedClients= false;
           $scope.isChecked = false;
        }
    }
};

answered Jun 21, 2021 at 3:06

Thomson Mixab

6425 silver badges8 bronze badges

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

Collectives™ on Stack Overflow

Checkbox check/uncheck not working properly with angularjs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related