CODEWITHSUNDEEP
htmlangularjsnested-loopsangularjs-ng-repeat
eric
eric

Reputation: 321

ng-repeat elements over nested objects

Say I have a nested object literal, and I want to display its contents in a table. If the object is 2 levels deep, I can use:

      <table>
          <thead>
            <tr>
              <td>key</td>
              <td>value</td>

            </tr>
          </thead>
          <tbody ng-repeat="(key01, value01) in data">
            <tr ng-repeat="(key02, value02) in value01">
                <td>{{key02}}</td>
                <td>{{value02}}</td>
            </tr>
          </tbody>
        </table>

If I have a nested object that is 3 or 4 levels deep, using a similar method how would I display the data in a table? The best I have is from this previously answered question, however I do not want conduct this logic in a controller, as suggested here.

I need a way to nest more than 2 ng-Repeats as seen above since in my application, the key names are variable at data generation.

An example of a 3 level deep nest object:

$scope.someVar =    { 'data': {
                              'A': {
                                     'x':'someValue'
                                   },
                               'B': {
                                     'y':'anotherValue'
                                    } 
                              }
                     }

Upvotes: 1

Views: 1773

Answers (2)

Simeon Cheeseman
Simeon Cheeseman

Reputation: 1768

Unfortunately for your stated requirements it's not possible. The table element structure just doesn't have the kind of nesting you want. I know you said you don't want to do this in a controller but that's probably the best way of doing this as a table is a way of representing 2D information, not more.

Also it should be said that if you're putting a lot of data in these nested ngRepeats you're very likely to slow the browser down to an unusable state.

If you really can't do some kind of transformation in the controller (which is easier on the browser as it's done once, instead of every time something changes...) you would have to use div's with table like styling. Try here (link)

Upvotes: 1

Kalhan.Toress
Kalhan.Toress

Reputation: 21901

u should be doing something like this

$scope.someVar = { 'data': {
     'A': {
          'x':'someValue'
           },
     'B': {
         'y':'anotherValue'
           } 
}

then you have to use ng-repeat like this,

<tbody ng-repeat="(key01, value01) in someVar.data">
        <tr ng-repeat="(key02, value02) in value01">

Upvotes: 0

Related Questions