ng-repeat dynamically create arrays for nested ng-repeats

Question

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?

NTP · Accepted Answer · 2017-12-30 06:28:06Z

1

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

    }

answered Dec 30, 2017 at 6:28

NTP

4,4483 gold badges18 silver badges25 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

amallard Over a year ago

Just playing around with your plunker trying to configure it as best I can to my project and so far it looks perfect, thanks! I'll be able to actually plug it in on Tuesday to see if it actually works, in which case I'll mark the answer as accepted. +1 from me right now though, great work! Much appreciated

NTP Over a year ago

I'm glad I was able to help.

Collectives™ on Stack Overflow

ng-repeat dynamically create arrays for nested ng-repeats

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related