在ng-repeat中选择子项时如何选择父复选框 [英] How to select Parent Checkbox when a Child is selected inside ng-repeat

问题描述

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

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

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

1) ng-checked:这对我不起作用，因为 ng-checked 没有将值与 ng-model 绑定.我还需要更新父级的 ng-model，因为这将反映在主窗体中.

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

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

对于我的表单，我需要为每个复选框使用不同的 ng-model，这就是我使用 name 来创建动态 ng-model 名称的原因.但是如果在这个动态列表中选择了一个孩子，我就是不知道如何选择父复选框.

我已经坚持了 2 天并在网上搜索了很多.你能帮我吗?

解决方案

HERE 是可行的解决方案基于你的小提琴.

JS

$scope.select = function(index){如果(索引 === 0){$scope.slaves.forEach(function(slave, ind){$scope.slaves[ind].isChecked = $scope.slaves[0].isChecked;});}别的 {var anyChild = false;for(var i = 1; i < $scope.slaves.length; i++){anyChild = anyChild ||$scope.slaves[i].isChecked;}$scope.slaves[0].isChecked = anyChild;}}

HTML

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

说实话，我认为解决方案并不优雅——最好将它的逻辑封装在自定义指令中.此外，通过以下方式表达 parent-child 关系可能会更好:

var parent = {...//父数据childeren : [child_1, ... , child_N]//孩子数组}

I am having a very hard time trying to figure out a solution for this. I have a checkbox group where the first checkbox is the parent and the following in that set will be child. I want the parent checkbox to be selected automatically if one of the child's checkbox is selected. Similarly parent needs to be get unchecked if no child is selected.

Here is my jsfiddle example: http://jsfiddle.net/Alien_time/PqTR7/3/

The main difficulty I am facing is because the checkboxes are created dynamically and it has dynamic ng-models for each. I have tried the following so far:

1) ng-checked: This doesnt work for me since ng-checked doesnt bind the value with ng-model. I need the ng-model of the parent to be updated as well since this is going to reflect in the main form.

2) JS solution: I thought js method will be the solution, but dont know how to add the js to controller as the ng-model is dynamically generated.

3) On other posts, there are some method that uses select all when parent is checked. But I couldnt find a solution for my approach since its the other way around where I only want the parent selected if one of the child is selected.

For my form, I need to have a different ng-model for each checkbox thats why I am using the name to create a dynamic ng-model name. But I just couldnt figure out how to select the parent checkbox if a child is selected in this dynamic list.

I have been stuck on this for 2 days and searched a lot on the net. Can you help me please?

解决方案

HERE is the working solution based on your 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>

To tell the truth I do not find the solution elegant -- you would be better off by encapsulating the logic of it in a custom directive. Moreover it would be probably better to express parent-child relation by:

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

这篇关于在ng-repeat中选择子项时如何选择父复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！