ng-repeatはネストされたngリピートのための配列を動的に作成します

Question

ng-repeatはネストされたngリピートのための配列を動的に作成できますか？

私は、これは愚かな音を知っているが、私は基本的にこのような何かを探している、と誰かがこれがどのようにひどいアイデアの私に伝え、よりよい解決策提示します願っています：だからアイデアを

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

を最初の<tr>行には、実際にクリックされたsubRowsを表示するボタンがあります。

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

又は第二行がクリックされた場合は、私が作成したい：：

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

を（それが実際に行を表示する前に）一回クリックしたので、私のような、そして、配列を作成します私は、ng-repeatはDOMを作成する前に配列を作成する必要があるため、このようなものは動作しないと仮定しています。あれは正しいですか？しかし、このテーブル構造を使用してこのようなものを作成するにはどうすればいいのか分かりません。どんな助け？

Answer 1

私の意見では、悪い考えではありません。たとえば、subRowデータが大きい場合にはユーザーがdisplaySubRow項目をクリックしたときにのみ、subRowデータを読み込みたい場合があります。あなたのサーバーに不必要な負担をかけたり、ユーザーを待たせたりします。 Plunker

サンプルコード

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" ]; 
     } 

    }