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> 행에는 실제로 클릭 한 subRow를 표시하는 버튼이 있습니다. 두 번째 행을 클릭 할 경우

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

    }