繁体   English   中英

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

[英]Checkbox check/uncheck not working properly with angularjs

我正在开发一个项目,我在 ASP.NET MVC 中使用局部视图,在该局部视图中有一个 html 表,在表 header 中,单击该复选框时有一个复选框,除了表体数据外,所有复选框都应该是选中,如果从表体数据中取消选中任何复选框,则顶部 header 复选框也应取消选中。 此功能适用于我当前的代码,但如果我取消选中顶部 header 复选框并再次选中它并尝试取消选中任何表体数据复选框顶部 header 复选框未取消选中我无法弄清楚为什么这是行不通的

这是我的代码

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

还有我的 angular 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;
    }
};

任何人都可以告诉什么是实现这一目标而不会失败的最佳方法。 提前致谢

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

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

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM