如何选择一个小孩的NG-重复内选定父复选框

问题描述

我有一个非常困难的时期，试图找出一个解决方案。我有一个复选框组，其中第一个复选框是在一套家长和下面将孩子。我想如果选择了孩子的复选框中的一个来自动选择父复选框。同样母公司必须是如果没有孩子被选中获得听之任之。

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.

这是我的jsfiddle例如：

我现在面临的主要困难是因为复选框是动态创建的，它具有动态NG-模型每个。我曾尝试以下至今：

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-检查：由于NG-检查犯规绑定NG-模型的价值对于我这种不工作。我需要父母的NG-模型，以及因为这是怎么回事的主要形式，以反映更新。

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的解决方案。我认为js的方法将是解决办法，但不知道如何添加JS把控制器是动态生成的NG-模型

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）在其他职位，也有使用全部选择当父被选中的一些方法。但我想不出找到它，因为那里周围只有我想如果选择了孩子一个选择的母公司的其他方式我的做法的解决方案。

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.

有关我的形式，我需要有一个不同的NG-模型每个复选框这就是为什么我使用名称来创建一个动态的NG-型号名称。 但是我只是想不出弄清楚如果一个孩子在这个充满活力的列表中选择如何选择父复选框。

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.

我一直停留在这2天，在网上搜索了很多。你能帮助我吗？

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.

$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>

说实话我没有找到解决办法优雅 - 你会通过自定义指令封装它的逻辑更好。
此外，它会可能是更好的前preSS 亲子由关系：

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

这篇关于如何选择一个小孩的NG-重复内选定父复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！