隐藏嵌套ng-repeat中的元素

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和演示演示