Javascript 角度过滤器仅显示与父项名称匹配的子项复选框

我有一个问题，让它正常工作…至少在一个工作良好的方式

我有父复选框和子复选框，它们是从一个对象数组中输入的

$scope.parents = [
    {name: 'check1', value: 'ck1'},
    {name: 'check2', value: 'ck2'}
];

$scope.children = [
    {name: 'child1', value' ch1', parent: 'ck1'},
    {name: 'child2', value: 'ch2', parent 'ck2'}
];

我可以做到这一点，但问题是在某些情况下，我有8个孩子，目前我隐藏了所有不适合父母的复选框，但它们仍然显示在DOM上，这意味着父母复选框之间存在巨大的空间，即使没有选中任何复选框。我尝试使用ng if而不是ng hide，但这也不起作用，它们仍然显示相同。它运行正常，只显示与父值匹配的子项，但它们仍在DOM中，即使在不可见时也会占用屏幕空间

所以我想看看是否有一种使用角度滤波器的方法，我可以做到这一点，但我一直无法让它工作

我试过了

ng-repeat="parent in parents track by $index"
...<checkbox>...
ng-repeat="child in children | filter: {'parent': {{parent.value}}} track by $index" 
...<checkbox>...

ng repeat=“父项中的父项按$index跟踪”
......
ng repeat=“子对象中的子对象|过滤器：{'parent'：{{{parent.value}}}}track by$index”
......

但是这不能正常工作，我得到了一个错误…基本上我需要比较子对象中的“parent”属性和parent复选框的parent.value…有没有办法通过我正在使用的filter方法来做到这一点？如果没有，是否有一种简单的方法，只让匹配的元素显示在父元素下面，而不是所有元素

理想情况下，在选择父项之前，复选框之间的空间很小，然后添加子项，并通过向下调整其他项为它们腾出空间

---

如果您有任何帮助，我们将不胜感激。

您可以创建一个自定义筛选器来检查父复选框的选中状态，并相应地显示子复选框

js

html

{{item.name}
{{item.name}-Parent:{{item.Parent}

---

一种比较简单的处理方法是在嵌套的ng repeat中设置ng if

<div ng-repeat="parent in parents">
    <label>
        <input type="checkbox" ng-model="selectedParent[parent.value]" value="parent.value"/>
        <span ng-bind="parent.name"></span>
    </label>
    <div ng-repeat="child in children" ng-if="selectedParent[child.parent] && child.parent === parent.value">
        <label>
            <input type="checkbox" ng-model="selectedChild[child.value]" value="child.value"/>
            <span ng-bind="child.name"></span>
        </label>
    </div>
</div>

上面的代码将确保

• 仅当选择了父元素时，子元素才会显示
• 其他不必要的元素不是由Angularjs创建的
• 复选框元素之间没有不必要的空间
• 无论给定的父母有多少子女，这都会起作用

---

太棒了！工作起来像一个机器人charm@MattE：很乐意帮忙！

<div ng-repeat ="item in parents">
   <input type="checkbox" ng-value="item.value" ng-model="item.checked"> {{item.name}}
</div>
<div ng-repeat ="item in children | filter: myCustomFilter">
   <input type="checkbox" ng-value="item.value"> {{item.name}}-Parent: {{item.parent}}
</div>

<div ng-repeat="parent in parents">
    <label>
        <input type="checkbox" ng-model="selectedParent[parent.value]" value="parent.value"/>
        <span ng-bind="parent.name"></span>
    </label>
    <div ng-repeat="child in children" ng-if="selectedParent[child.parent] && child.parent === parent.value">
        <label>
            <input type="checkbox" ng-model="selectedChild[child.value]" value="child.value"/>
            <span ng-bind="child.name"></span>
        </label>
    </div>
</div>