CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
amallard
amallard

Reputation: 1229

ng-repeat dynamically create arrays for nested ng-repeats

Is it possible to have ng-repeat dynamically create arrays for nested ng-repeats?

I know this sounds silly, but I'm essentially looking for something like this, and hoping someone will tell me how terrible of an idea this is and present a better solution:

<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 the idea is that the first <tr> row actually has a button that will show the subRows once clicked. So once clicked (before it actually displays the rows), I'll create the array then, such as:

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

or if the second row was clicked, I'd create:

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

I'm assuming something like this won't work because ng-repeat needs to have the array created before it can create the DOM. Is that correct? But I'm not sure how else I'd be able to create something like this then using this table structure. Any help?

Upvotes: 0

Views: 230

Answers (1)

NTP
NTP

Reputation: 4448

It is possible and in my opinion it is not a bad idea, for example you may want to load your subRow data only when user clicks on displaySubRow items if your subRow data is big or they are images, to avoid putting an unnecessary burden to your server or keep your users waiting.

Working Plunker

Sample Code

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

    }

Upvotes: 1

Related Questions