CODEWITHSUNDEEP
angularjsangularjs-ng-repeat
Andrew Luhring
Andrew Luhring

Reputation: 1894

Angular nested ng-repeat table

Given a data structure in TableController:

var obj = {
  titles : { 
     title: 'Title'
  ,  data : ['a title' , 'another title', 'look a title', 'and another']
  }
, other-prop : { 
     title: 'Other Prop'
  ,  data : [3030, 849875, 8888, 48484]
  }
}

this.obj = obj;

if your goal was to create a table like:

table
  thead
    tr
      th "Title"
      th "Other Prop"

  tbody
    tr
      td "a title"
      td "3030"
    tr
      td "another title"
      td "849875"
    tr
      td "look a title"
      td "8888"
    tr
      td "and another"
      td "48484"

How would you structure the ng-repeats? Right now I have:

div [controller="TableController as table"]

table
  thead
    tr 
      th [ng-repeat = "(key, value) in table.obj"]

  tbody
    tr [ng-repeat = "(key, value) in table.obj"
      td [ng-repeat="(key, val) in table.obj track by $index"] "{{value.data}}"

Which is giving me... 

table
  thead 
    tr
      th "Title"
      th "Other Prop"
  tbody
    tr
      td "['a title' , 'another title', 'look a title', 'and another']"
      td "[3030, 849875, 8888, 48484]"
    tr
      td "['a title' , 'another title', 'look a title', 'and another']"
      td "[3030, 849875, 8888, 48484]"

... So I'm close but I cant get... the objects to list in the correct direction.

Anyone?

Upvotes: 0

Views: 166

Answers (1)

Sly_cardinal
Sly_cardinal

Reputation: 12993

You can do it by indexing directly into the table['other-prop'].data array:

div [controller="TableController as table"]

table
    thead
        tr 
            th [ng-repeat = "(key, value) in table.obj"]

    tbody
        tr [ng-repeat = "(key, value) in table.obj.data"
            td "{{value}}"
            td "{{table['other-prop'].data[$index]}}"

It will work but it's not scalable to an arbitrary number of lists.

For that you would need to take Brian Noah's suggestion and preprocess the data into a structure that's easier to render out.

Upvotes: 1

Related Questions