ネストされた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