Question

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

以下是我的jsfiddle示例： http://jsfiddle.net/Alien_time/PqTR7/3/

我面临的主要困难是因为复选框是动态创建的，并且每个复选框都有动态ng模型。到目前为止，我已尝试过以下内容：

1）ng-checked：这对我不起作用，因为ng-checked不会将值与ng-model绑定。我需要更新父级的ng模型，因为这将以主要形式反映出来。

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

3）在其他帖子中，有一些方法在选中父级时使用全选。但我找不到我的方法的解决方案，因为它反过来我只想在选择其中一个孩子的情况下选择父级。

对于我的表单，我需要为每个复选框设置不同的ng模型，这就是我使用name创建动态ng模型名称的原因。 但如果在此动态列表中选择了子项，我就无法弄清楚如何选择父复选框。

我被困在这两天，并在网上搜索了很多。你能帮帮我吗？

Answer 1

HERE是基于你的小提琴的工作解决方案。

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>

说实话我没有找到优雅的解决方案 - 通过将其逻辑封装在自定义指令中会更好。此外，通过以下方式表达parent-child关系可能更好：

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

Answer 2

此问题的解决方案是添加手表。

在控制器中添加以下内容

$scope.$watch('checkboxData', function (newValue, oldValue) {
    var anyChecked = false;
    // see if any are checked
    $scope.slaves.reduce(function (pVal, cVal, idx, arr) {
        if (newValue[cVal.name]) anyChecked = anyChecked || newValue[cVal.name];
    });
    // replace the parent 'checked' in the model
    $scope.checkboxData['Parent'] = anyChecked;
}, true);

并将以下内容添加到输入元素中。

ng-checked='checkboxData[slave.name]'

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

2 个答案:

JS

HTML