javascript - 如何将 ng-repeat 放入 ng-repeat 中 n 次

Question

我有一个具有嵌套节点的 JSON 对象，它可以继续进行任意数量的级别。我需要在单击父节点时显示节点的内容。它看起来像这样

     "node": [
    {
      "id": "id of the concept model",
      "name": "Curcumin",
      "type": "conceptmodel",
      "node": [
        {
          "id": "group1",
          "name": "Node 01",
          "weight": "70",
          "type": "text",
          "node": [
            {
              "id": "group11",
              "name": "Node 02",
              "weight": "70",
              "type": "structure",
              "node": []
            }
          ]
        }
      ]
    },
    {
      "id": "id of the concept model",
      "name": "Abuse Resistent Technology",
      "type": "conceptmodel",
      "node": [
        {
          "id": "group1",
          "name": "Category 01",
          "weight": "70",
          "type": "text",
          "node": []
        }
      ]
    },
    {
      "id": "id of the concept model",
      "name": "PC in Aviation",
      "type": "conceptmodel",
      "node": [
        {
          "id": "group1",
          "name": "Industry",
          "weight": "70",
          "type": "text",
          "node": [
             {
          "id": "group1",
          "name": "Node 01",
          "weight": "70",
          "type": "text",
          "node": []
            }
          ]
        }
      ]
    }
  ]

我已经为两个级别做了这样的事情:

<div class="conceptModels">
   <!--tree starts-->
   <ul class="tree">
      <span class="treeBlk">
         <li ng-repeat="conceptModel in conceptModels.node" >
            <span ng-click="levelOne=true" class="textSpan show top">{{conceptModel.name}}<span class="arrclose"></span></span>
            <ul ng-show="levelOne">
               <li ng-repeat="node1 in conceptModel.node">
                  <span  ng-click="levelTwo=true" class="textSpan">{{node1.name}}<span class="arrclose"></span></span>
                  <ul ng-show="levelTwo">
                     <li ng-repeat="node2 in node1.node">
                        <span class="textSpan">{{node2.name}}<span class="arrclose"></span> </span>
                     </li>
                  </ul>
               </li>
            </ul>
         </li>
      </span>
   </ul>
</div>

有没有办法将这个解决方案泛化到任意数量的级别？？

Answer 1

试试这个

var jimApp = angular.module("mainApp",  []);

jimApp.controller('mainCtrl', function($scope){
  $scope.nodes = [
        {
          "id": "id of the concept model",
          "name": "Curcumin",
          "type": "conceptmodel",
          "node": [
            {
              "id": "group1",
              "name": "Node 01",
              "weight": "70",
              "type": "text",
              "node": [
                {
                  "id": "group11",
                  "name": "Node 02",
                  "weight": "70",
                  "type": "structure",
                  "node": []
                }
              ]
            }
          ]
        },
        {
          "id": "id of the concept model",
          "name": "Abuse Resistent Technology",
          "type": "conceptmodel",
          "node": [
            {
              "id": "group1",
              "name": "Category 01",
              "weight": "70",
              "type": "text",
              "node": []
            }
          ]
        },
        {
          "id": "id of the concept model",
          "name": "PC in Aviation",
          "type": "conceptmodel",
          "node": [
            {
              "id": "group1",
              "name": "Industry",
              "weight": "70",
              "type": "text",
              "node": [
                 {
              "id": "group1",
              "name": "Node 01",
              "weight": "70",
              "type": "text",
              "node": []
                }
              ]
            }
          ]
        }
      ];
});

li{
  list-style: none;
  background-color:#334559;
  color:#FFF;
  padding:2px;
  cursor: pointer;
  
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet"/>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

    

    
<div ng-app="mainApp" ng-controller="mainCtrl">
  <script type="text/ng-template" id="treeNodes.html">
    <ul>
      <li ng-repeat="node in nodes" >
        <div ng-click="node.expand = (node.expand?false:true);" ><i class="fa" ng-class="{'fa-caret-right':(node.node.length && !node.expand), 'fa-caret-down':(node.node.length && node.expand)}"></i>&nbsp;{{node.name}}</div>
        <div ng-show="node.node.length && node.expand"  ng-include=" 'treeNodes.html' " onload="nodes = node.node"></div>
      </li>
    </ul>
                                                                                                 </script>
  <div ng-include=" 'treeNodes.html'" style="overflow-y: auto;height: 55%;width: 300px;"></div>
</div>