Hide elements in nested ng-repeat

Question

I'm trying to make a nested list of items where user can hide either a certain item or a group of nested items. So far, I'm making use of $index and I've got this:

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

With this controller:

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;
        };
    });

It does work. The downside is, there will be too many $index to mantain while the nested list is going deeper. Plus, I have to write all the conditional on every nest level.

My question is, is there any alternative which is simpler, more reliable, and if possible, will generate automatically no matter how many nested item that I have?

Answer 1

please check ui-tree, I think it's what you looking for.

github ui-tree and the demo demo