javascript - 在 ng-repeat 中选择子项时如何选择父项复选框

Question

我很难找到解决方案。我有一个复选框组，其中第一个复选框是父级，该组中的以下复选框将是子级。我希望如果选择了子复选框之一，则自动选择父复选框。同样，如果没有选择子项，则需要取消选中父项。

这是我的 jsfiddle 示例: http://jsfiddle.net/Alien_time/PqTR7/3/

我面临的主要困难是因为复选框是动态创建的，并且每个复选框都有动态 ng-models。到目前为止我已经尝试过以下方法:

1) ng-checked:这对我不起作用，因为 ng-checked 不会将值与 ng-model 绑定(bind)。我还需要更新父级的 ng-model，因为这将反射(reflect)在主表单中。

2)JS解决方案:我认为js方法将是解决方案，但不知道如何将js添加到 Controller ，因为ng-model是动态生成的。

3)在其他帖子中，有一些方法在检查父级时使用全选。但我找不到适合我的方法的解决方案，因为它是相反的，如果选择了一个 child ，我只希望选择 parent 。

对于我的表单，我需要为每个复选框都有一个不同的 ng-model，这就是为什么我使用 name 创建动态 ng-model 名称。 但我只是不知道如果在此动态列表中选择了子项，如何选择父项复选框。

我已经被这个问题困扰了两天，并在网上搜索了很多。你能帮我一下吗？

Answer 1

HERE是基于你的 fiddle 的工作解决方案。

JS

$scope.select = function(index){
    if(index === 0){
        $scope.slaves.forEach(function(slave, ind){
            $scope.slaves[ind].isChecked = $scope.slaves[0].isChecked;
        });
    }
    else {
        var anyChild = false;
        for(var i = 1; i < $scope.slaves.length; i++){
            anyChild = anyChild || $scope.slaves[i].isChecked; 
        }
        $scope.slaves[0].isChecked = anyChild;
    }
}

HTML

<div ng-repeat="slave in slaves">
    <input type="checkbox" ng-model="slave.isChecked" ng-click="select($index)" />
    {{slave.name}} -  {{ slave.description }}
</div>

说实话，我觉得这个解决方案并不优雅——最好将其逻辑封装在自定义指令中。此外，通过以下方式表达父子关系可能会更好:

var parent = {
   ... // parent data
   childeren : [child_1, ... , child_N] // array of children
}