Angular nested ng-repeat table

Question

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?

there's no really good way unless you preprocess your model to relate better. you would have to form your data differently. — Brian Noah
– Brian Noah, Commented Nov 6, 2014 at 23:45

Sly_cardinal · Accepted Answer · 2014-11-07 00:06:29Z

1

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.

answered Nov 7, 2014 at 0:06

Sly_cardinal

13.3k5 gold badges53 silver badges55 bronze badges

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

Collectives™ on Stack Overflow

Angular nested ng-repeat table

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related