Question

我在解决这个问题时遇到了问题...至少以一种运作良好的方式。

我有父复选框和子复选框从一组对象中提供。

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

但这不能正常工作，我收到错误...基本上我需要将子节点中的'parent'属性与父复选框的parent.value进行比较...有没有办法通过我正在使用的过滤方法？如果没有，只有一个简单的方法，只有匹配的元素显示在父母的下面，而不是所有的元素？

理想情况下，在选中父级之前，复选框之间的空间非常小，然后会添加子级，并通过向下调整其他子级来为它们腾出空间......

任何帮助将不胜感激

Answer 1

处理事物的一种相当简单的方法是在嵌套的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
复选框元素之间没有不必要的空格
无论给定父母的子女数量如何，这都将有效。

Answer 2

您可以创建自定义过滤器以检查父复选框的已检查状态，并相应地显示子复选框

JS

  $scope.myCustomFilter = function(row){
    var flag = false;
    angular.forEach($scope.parents, function(value, key){
        if(value.checked){
          if(value.value == row.parent)
            flag = true;
        }
    });

    return flag;
  }

HTML

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

Demo

angular Filter显示onlychild复选框匹配父名称

2 个答案: