ng-repeat dynamisch erstellen Arrays für verschachtelte ng-Wiederholungen

Question

Ist es möglich, ng-repeat dynamisch erstellen Arrays für verschachtelte ng-Wiederholungen?

Ich weiß, das klingt dumm, aber ich bin im Wesentlichen für so etwas suchen, und die Hoffnung, jemand wird mir sagen, wie schrecklich eine Idee das ist und stellt eine bessere Lösung:

<tbody ng-repeat="row in myRows track by $index"> 
    <tr>{{row.name}}</tr> 
    <tr ng-repeat="subRow in myRows$index>{{subRow.name}}</tr> 
</tbody> 

So ist die Idee ist, dass die erste <tr> Zeile tatsächlich eine Schaltfläche hat, die die einmal angeklickten Unterzeilen anzeigt. Also klickte einmal (bevor es tatsächlich die Zeilen anzeigt), ich werde das Array dann, wie zB:

myRows0 = [{name:"Sub Row A", value:1}, 
      {name:"Sub Row B", value:2}]; 

oder wenn die zweite Reihe geklickt wurde, würde ich erstellen:

myRows1 = [{name:"Sub Row C", value:3}, 
      {name:"Sub Row D", value:4}]; 

Ich gehe davon aus, dass so etwas nicht funktioniert, da ng-repeat das Array erstellen muss, bevor es das DOM erstellen kann. Ist das korrekt? Aber ich bin mir nicht sicher, wie ich sonst so etwas erstellen könnte, wenn ich diese Tabellenstruktur verwende. Irgendeine Hilfe?

Answer 1

Es ist möglich und meiner Meinung nach ist es keine schlechte Idee, zum Beispiel möchten Sie möglicherweise Ihre subRow Daten nur dann laden, wenn der Benutzer auf displaySubRow Elemente klickt, wenn Ihre subRow Daten groß oder sie Bilder sind, um zu vermeiden unnötige Belastung für Ihren Server oder halten Sie Ihre Benutzer warten.

Arbeiten Plunker

Beispielcode

html

<table> 
     <tbody ng-repeat="item in data" ng-init="item.show = false"> 
    <tr> 
     <td> 
      <button ng-show="item.show==false" ng-click="getRowSubItems(item)">Show</button> 
      <button ng-show="item.show==true" ng-click="item.show = false">Hide</button> 
     </td> 
     <td> 
      {{item.name}} 
     </td> 
    </tr> 
    <tr ng-show="item.show == true"> 
     <td> 

     </td> 
     <td> 
      <div ng-repeat="subItem in item.cars"> 
      {{subItem}} 
      </div> 
     </td> 
    </tr> 
</tbody> 
</table> 

js

$scope.data = 
    [{"name":"Lex", 
     "age":43 
    }, 
    {"name":"Alfred", 
     "age":30 
    }, 
    {"name":"Diana", 
     "age":35 
    }, 
    {"name":"Bruce", 
     "age":27 
    }, 
    {"name":"Oliver", 
     "age":32 
    }]; 

    $scope.getRowSubItems = function(item){ 
     //you can also make a http call to get data from your server 
     item.show = true; 
     if(item.name == "Lex"){ 
      $http.get('https://jsonplaceholder.typicode.com/posts/1') 
      .then(function(response) { 
       item.cars = response.data; 
      }); 
     } 
     else{ 
     item.cars = [ "Ford", "BMW", "Fiat" ]; 
     } 

    }