2016-05-09 23 views
7

Ho un oggetto JSON con nodi annidati, che può andare avanti per qualsiasi numero di livello. Ho bisogno di visualizzare il contenuto di un nodo al clic del suo nodo genitore. Sarebbe simile a questa enter image description hereCome inserire ng-repeat all'interno di ng-repeat per n numero di volte

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

ho fatto qualcosa di simile per due livelli:

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

C'è un modo per generalizzare questa soluzione a qualsiasi numero di livello ??

+0

Eventuali duplicati di [usando ng-repeat all'interno di un altro ng-repeat] (http://stackoverflow.com/questions/31484686/using-ng-repeat -inside-another-ng-repeat) –

risposta

13

Try This

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>

+1

Grazie per la risposta. Come faccio a mostrare i nodi figli al clic del suo nodo genitore ?? –

+0

@ManojSuthar Ho modificato la risposta – byteC0de

+0

@ManojSuthar pls controlla l'aggiornamento ora – byteC0de

1

Una delle soluzioni può essere quella di creare una direttiva che gestisca l'operazione ricorsiva a qualsiasi limite.

Nota: Questa soluzione è una stampante JSON generica + redattore per angolare che ho creato per una delle mie applicazioni

JsonApp.directive('renderInput',['$compile','NODE_RELATION_CONFIG',function($compile){ 

    var getTemplate = function(inputKey,inputValue,inputParent,inputConfig,inputDisabled,inputHidden){ 
     var template = ''; 
     var disabled = (inputDisabled || (inputConfig && inputConfig["disabled"])) ? true : false; 
     var hidden = (inputHidden || (inputConfig && inputConfig["hidden"])) ? true : false; 

     if(typeof(inputConfig)=="undefined") 
      inputConfig ={} 

     for(var key in inputParent) 
     { 
      if(typeof(inputConfig[key])=="undefined") 
       inputConfig[key] = {}; 
     } 



     if(typeof(inputValue)=="object") 
     { 

      //template = '<div ng-hide="'+hidden+'" style="padding-left:7%;border:1px solid #ddd;"><div class="pheading">{[{ inputKey }]}</div><div id="render-123" ng-repeat="(key,value) in inputValue" render-input input-key="{[{ key}]}" input-parent="inputValue" input-value="value" input-config="inputConfig[key]" input-disabled="'+disabled+'" input-hidden="'+hidden+'"></div></div>'; 
      template = '<div ng-hide="'+hidden+'"><div id="render-123" ng-repeat="(key,value) in inputValue" render-input input-key="{[{ key}]}" input-parent="inputValue" input-value="value" input-config="inputConfig[key]" input-disabled="'+disabled+'" input-hidden="'+hidden+'"></div></div>'; 
     } 
     else 
     { 

      var fieldHeading = (inputConfig && inputConfig["mapped_name"]) ? inputConfig["mapped_name"]: inputKey; 
      if(typeof(inputValue)!="string" || inputValue.length < 200) 
      { 
       //small fields use input type text 

       template = '<div ng-hide="'+hidden+'"><h3 class="gi-orange dy-field-title">'+fieldHeading+'</h3><input class="dy-id-input" type="text" value="{[{ inputValue }]}" ng-disabled="'+disabled+'" /></div>'; 


      } 
      else 
      { 
       template = '<div ng-hide="'+hidden+'"><h3 class="gi-orange dy-field-title">'+fieldHeading+'</h3><textarea class="dy-id-textarea" type="text" ng-disabled="'+disabled+'">{[{ inputValue }]}</textarea></div>'; 
      } 
     } 
     return template 
    } 

    return{ 
     scope:{ 
      inputKey:"@", 
      inputValue:"=", 
      inputParent:"=", 
      inputConfig:"=", 
      inputDisabled:"=", 
      inputHidden: "=" 
     }, 



     link : function(scope, element, attrs) { 

      element.html(getTemplate(scope.inputKey,scope.inputValue,scope.inputParent,scope.inputConfig,scope.inputDisabled,scope.inputHidden)).show(); 

      $compile(element.contents())(scope); 
      $(element).on('change','input,textarea',function(e){ 
       if(!scope.$$phase) 
        scope.inputParent[scope.inputKey]=$(this).val(); 
       if(!scope.$$phase) 
        scope.$apply(); 
       e.stopImmediatePropagation(); 
      }) 

     }, 

     restrict: 'AE' 
    } 
}]); 

Esempio di configurazione:

{"flight_sector": {"additional_fields": ["at.scdl_pg.content", "at.scdl_pg.meta.keywords", "at.scdl_pg.meta.title", "at.scdl_pg.meta.desc"], "fields_mapped_names": {"at|scdl_pg|meta|desc": "Flight Sector Page : Meta Description", "at|scdl_pg|meta|keywords": "Flight Sector Page : Meta Keywords", "at|score|flier": "Flight Sector Flier Score", "at|scdl_pg|content": "Flight Sector Page : Content Html", "at|scdl_pg|meta|title": "Flight Sector Page : Meta Title", "at|type": "Flight Sector Type"}, "disabled_fields": ["at.score.flier", "at.type"], "hidden_fields": ["at.airlines", "_id", "s", "e", "sn", "en", "st", "t"], "settings": {"en": {"hidden": 1}, "e": {"hidden": 1}, "st": {"hidden": 1}, "s": {"hidden": 1}, "at": {"scdl_pg": {"content": {"mapped_name": "Flight Sector Page : Content Html"}, "meta": {"keywords": {"mapped_name": "Flight Sector Page : Meta Keywords"}, "title": {"mapped_name": "Flight Sector Page : Meta Title"}, "desc": {"mapped_name": "Flight Sector Page : Meta Description"}}}, "score": {"flier": {"disabled": 1, "mapped_name": "Flight Sector Flier Score"}}, "type": {"disabled": 1, "mapped_name": "Flight Sector Type"}, "airlines": {"hidden": 1}}, "t": {"hidden": 1}, "_id": {"hidden": 1}, "sn": {"hidden": 1}}}, "routes_map": {"additional_fields": ["at.rpr_pg.desc"], "fields_mapped_names": {"at|rpr_pg|desc": "Routeplanner Page Write-Up"}, "hidden_fields": ["routes", "t", "s", "e", "sn", "en", "_id"], "settings": {"en": {"hidden": 1}, "e": {"hidden": 1}, "s": {"hidden": 1}, "t": {"hidden": 1}, "routes": {"hidden": 1}, "_id": {"hidden": 1}, "at": {"rpr_pg": {"desc": {"mapped_name": "Routeplanner Page Write-Up"}}}, "sn": {"hidden": 1}}}} 

Nota: Questa configurazione di esempio si prende cura dei campi aggiuntivi che si desidera aggiungere per esistere ing json + se si vogliono nascondere alcuni campi in modo specifico + mantenere alcuni campi disabilitati come campi di input.

Problemi correlati