AngularJS 需要在不使用 ng-model 的情况下将父复选框与子复选框绑定答案

【问题标题】：AngularJS Need to bind parent checkbox with child without using ng-modelAngularJS 需要在不使用 ng-model 的情况下将父复选框与子复选框绑定
【发布时间】：2017-10-07 18:57:07
【问题描述】：

我通过API 调用使用ng-repeat 获得了一个用户列表。每个用户有 5 个类别，每个类别在 true/false 上获得 2-3 个授权。

对于每个user/category/authorization，我想要一个复选框来更改授权值。

当我选中用户的复选框时，我希望他的所有 5 个类别 + 所有授权都被选中 true，如果我取消选中用户的一个或多个授权或类别，他的复选框将变为 false。

所以，如果我概括一下：有parent(User)、child(Category) 和盛大的child(Authorization)。

我看到我们可以将ng-model 与ng-checked 一起使用，但在我的复选框中，ng-model 用于boolean authorization (ng-model="authorization.Enabled")，对于超过 1 个孩子，这不再起作用。

我该如何处理这种情况？需要$watcher 吗？

感谢您的帮助！

【问题讨论】：

请用代码示例说明您的问题。
jsfiddle.net/pio123/624y6/1 我需要这个东西但没有使用ng-model 因为我的ng-model 已经用于我的授权。启用

标签： angularjs checkbox parent-child angular-ngmodel angularjs-ng-checked

【解决方案1】：

您可以对每个孩子/孙子使用 ng-click。在其中传递父对象（用户或类别）对象并在特定条件下修改其布尔值（当所有子对象为真或不为真时）您不应该同时使用 ng-click 和 ng-model，您可以通过使用 ng-checked 和 ng-click on parent(user or cathegory) 复选框来避免这样做。

vm.authorizationCheckboxClick = function (user,category, authorization) {
authorization.booleanValue = !authorization.booleanValue;
if (authorization.booleanValue){
    category.booleanValue = true;
    category.authorizations.forEach(function(element) {
      if(!element.booleanValue){
        category.booleanValue = false;
        break;
      }
    }, this);
}
else {
  category.booleanValue = false;
}

if (category.booleanValue){
    user.booleanValue = true;
    user.categories.forEach(function(element) {
      if(!element.booleanValue){
        user.booleanValue = false;
        break;
      }
    }, this);
}
else {
  user.booleanValue = false;
}
}

此示例功能更改授权值，然后更改父类别和用户的布尔值。您可以将此值绑定到 ng-checked 指令

【讨论】：