切换组中的所有Angular复选框

Question

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

<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

首先，您需要设置一个ng-model切换复选框才能使其正常工作，否则 Angular 可能会抱怨：

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

完整的工作示例

上面例子的代码

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