隱藏嵌套的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 和演示 demo