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

Question

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

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

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

因此，如果我概括一下:有一个parent(User)，child(Category)和大child(Authorization)。

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

我该如何处理此案例？需要$watcher吗？

感谢您的帮助！

Answer 1

您可以在每个子级/孙级子级上使用ng-click。在其中传递父对象(user或cathegory)对象，并根据特定条件修改其布尔值(当所有childs为真或不为真时)您不应该同时使用ng-click和ng-model，您可以通过使用ng-click和ng-click on parent(user或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指令