如何将ng-repeat放入ng-repeat中n次 [英] How to put ng-repeat inside ng-repeat for n number of times

问题描述

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

I have a JSON object having nested nodes, which can go on for any number of level. I need to display the content of a node on click of it's parent's node. It would look something like this

     "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": []
            }
          ]
        }
      ]
    }
  ]

我在两个级别做了类似的事情：

I have done something like this for two levels :

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

有没有办法将此解决方案推广到任意数量的级别？

Is there a way to generalize this solution to any number of level??

推荐答案

试试这个

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>

这篇关于如何将ng-repeat放入ng-repeat中n次的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！