Question

我有一个text-checkbox项目表，每个项目都有一个描述和一个复选框。我现在需要添加一个超级复选框，清除或检查所有框。当前代码如下所示，我首次尝试突出显示解决方案。

<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table table-bordered">            
     <tr id="myBlusteringAttempt">  
        <td width="90%">
            <p>Clear/Check all options</p>
        </td>
        <td width="10%" align="center" valign="middle">
            <input type="checkbox" ng-change="toggleCheckboxes()">
        </td>
    </tr>
    <tr id="existing-code-that-works" ng-repeat="declaration in LegalDeclaration.ReplacementOfPolicy.ReplacementPolicyDeclarations">
        <td width="90%">
            <p>{{declaration.DeclarationText}}</p>
        </td>
        <td width="10%" align="center" valign="middle">
            <input type="checkbox" ng-model="declaration.AcceptDeclaration">
        </td>
    </tr>
</table>

我可以用jQuery轻松地做到这一点，但我宁愿使用Angular的jQuery外观，也不要让框架有任何错误。

Answer 1

在toggleCheckboxes中，您只需将所有模型设置为您想要的值。

var currentAllStatus = false;
$scope.toggleCheckboxes = function () {
    currentAllStatus = !currentAllStatus;
    $scope.LegalDeclaration.ReplacementOfPolicy.ReplacementPolicyDeclarations.forEach(function (declaration) {
        declaration.AcceptDeclaration = currentAllStatus;
    });
};

Answer 2

首先，您需要在切换复选框中设置ng-model以使此功能正常工作，否则Angular可能会complain：

<input type="checkbox" ng-model="toggle" ng-change="toggleCheckboxes()">

之后，您应该循环结果并使用复选框值绑定它们：

    $scope.toggle = false;
    $scope.toggleCheckboxes = function () {
        angular.forEach($scope.LegalDeclaration.ReplacementOfPolicy.ReplacementPolicyDeclarations, function (value, key) {
            value.AcceptDeclaration = $scope.toggle;
        });
    }

Full working example

The code of the example above

编辑我应该注意到，将UI元素切换为复选框的方法与Angular的范围不同。 Angular主要用作数据绑定MV *框架，将数据提取到视图中。您应该阅读有关使用Angular（或任何其他MV *框架，如Backbone）的更多信息："Thinking in AngularJS" if I have a jQuery background?

切换组中的所有Angular复选框

2 个答案: