Question

我正在尝试创建一个项目的嵌套列表，用户可以隐藏某个项目或一组嵌套项目。到目前为止，我正在使用$index，我得到了这个：

<div ng-controller="ItemCtrl">
    <div ng-repeat="x in xs" ng-hide="hidden == $index">
        <span>{{ x.name }}</span>
        <button ng-click="hide($index)">Collapse</button>

        <div ng-repeat="y in x.ys" ng-hide="hidden == [x.$index, $index]">
            <span>{{ y.name }}</span>
            <button ng-click="hide([x.$index, $index])">Collapse</button>

            <div ng-repeat="z in y.zs" ng-hide="hidden == [x.$index, y.$index, $index]">
                <span>{{ z.name }}</span>
                <button ng-click="hide([x.$index, y.$index, $index])">Collapse</button>
            </div>
        </div>
    </div>
</div>

使用此控制器：

angular.module("app", [])
    .controller("ItemCtrl", function($scope) {
        $scope.xs = [...];  // My data here

        $scope.hidden = -1; // Nothing hidden yet
        $scope.hide = function(item) {
            $scope.hidden = item;
        };
    });

确实有效。缺点是，当嵌套列表更深入时，将有太多$index来保持。另外，我必须在每个嵌套级别编写所有条件。

我的问题是，有没有更简单，更可靠的替代方案，如果可能的话，无论我有多少嵌套项目都会自动生成？

Answer 1

请检查ui-tree，我认为这就是你要找的东西。

github ui-tree 和演示 demo

隐藏嵌套ng-repeat中的元素

1 个答案: