如何在多级ng-repeat中实现ng-show as切换

Question

 1. level1
    -lvl1A
     --lvl1A1
     --lvl1A2
       ---lvl1A2X
       ---lvl1A2Y
    -lvl2A
     --lvl2A1
     --lvl2A2
 2. level2

这只是多级ng-repeatul li元素的样本。单击任何级别时，只有下一级数据将显示或隐藏整个数据。

请给我一些解决方案。提前谢谢。

Answer 1

我在业余时间做过这件事......这可能不是最好的方法。

angular.module("myApp", []).
controller("TreeController", ['$scope',
  function($scope) {
    $scope.delete = function(data) {
      data.nodes = [];
      return false;
    };
    $scope.add = function(data) {
      var post = data.nodes.length + 1;
      var newName = data.name + '-' + post;
      var showSub = false;
      data.nodes.push({
        name: newName,
        showSub: showSub,
        nodes: []
      });
      return false;
    };
    $scope.tree = [{
      name: "Node",
      showSub: false,
      nodes: []
    }];
  }
]);

<script type="text/ng-template" id="tree_item_renderer.html">
  {{data.name}}
  <button ng-click="add(data);  $event.stopPropagation();">Add node</button>
  <button ng-click="delete(data);  $event.stopPropagation();" ng-show="data.nodes.length > 0">Delete nodes</button>
  <ul ng-show="data.showSub">
    <li ng-repeat="data in data.nodes" ng-include="'tree_item_renderer.html'" ng-click="data.showSub = !data.showSub; $event.stopPropagation();"></li>
  </ul>
</script>
<ul ng-app="Application" ng-controller="TreeController">
  <li ng-repeat="data in tree" ng-include="'tree_item_renderer.html'" ng-click="data.showSub = !data.showSub"></li>
</ul>

js小提琴