复选框选中/取消选中不能正确使用angularjs

g9icjywg  于 2021-09-29  发布在  Java
关注(0)|答案(1)|浏览(424)

我正在从事一个项目,在该项目中,我在asp.net mvc中使用部分视图,在该部分视图中有一个html表格,在表格标题中有一个复选框,单击该复选框时,应选中除表格正文数据外的所有复选框,如果从表格正文数据中未选中任何复选框,则还应选中顶部标题复选框未经检查。此功能适用于我的当前代码,但如果我取消选中顶部标题复选框并再次选中它并尝试取消选中任何表体数据复选框顶部标题复选框未被取消选中,则此功能仅在第二次运行一次。我无法找出此功能不起作用的原因
这是我的密码

<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>

还有我的js代码

$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;
    }
};

有谁能告诉我,实现这一目标而不失败的最佳方法是什么。提前谢谢

lymgl2op

lymgl2op1#

请尝试以下代码。祝你好运

$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;
        }
    }
};

相关问题