Angular repeat in tables

Question

I have multiple source of income that I want displayed into a table. I will be importing more than 2 values and I want to be able to put them side by side for easy comparing. However, the code below is definitely not working. https://plnkr.co/edit/Vkcc9YUnEIc3PuuS8Yv3?p=preview

<table>
<tr>
    <td ng-repeat="type in informationNames">{{type}}>
    </td>
    <td ng-repeat="type in informationValues1">{{type}}>
    </td>
    <td ng-repeat="type in informationNameValues2">{{type}}>
    </td>
</tr>
</table>

I found this but this doesn't really apply since it is only 1 array and I'll be importing 2+. Angular ng-repeat in table

it doesn't help us if your not providing code for the controller, informationNames could be undefined or a fire breathing unicorn for all we know — svarog
– svarog, Commented Aug 29, 2016 at 20:50
Instead of having three lists of single values you should create one list with three properties: {informationName, informationValue, informationNameValue } and do the repeat on the row. — Dimitri
– Dimitri, Commented Aug 29, 2016 at 20:58
Added a Plunker link, plnkr.co/edit/Vkcc9YUnEIc3PuuS8Yv3?p=preview. @mparnisari — Sam Bush
– Sam Bush, Commented Aug 29, 2016 at 21:08

Niles Tanner · Accepted Answer · 2016-08-29 22:45:32Z

1

you could place each repeat into a different row so your code would look like:

<table>
  <tr>
    <td ng-repeat="type in informationNames">{{type}}
    </td>
  </tr>
  <tr>
    <td ng-repeat="type in informationValues1">{{type}}
    </td>
   </tr>
   <tr>
    <td ng-repeat="type in informationNameValues2">{{type}}
    </td>
   </tr>
  </table>

this way they are all listed veritally

if you want them horizontally and you know all of the list are the same length you can do it like this:

`

<table>
     <tr ng-repeat="name in informationNames">
      <td>{{name}}
     </td>
      <td>
       {{informationValues1[$index]}}
      </td>
      <td>
        {{informationNameValues2[$index]}}
      </td>
    </tr>
  </table>

edited Aug 29, 2016 at 22:45

answered Aug 29, 2016 at 21:25

Niles Tanner

4,0512 gold badges19 silver badges33 bronze badges

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

4 Comments

Sam Bush Over a year ago

I want them side by side. It looks cleaner.

Niles Tanner Over a year ago

@SamBush do you mean have the information oriented horizontally? Also does the information have to be in different lists?

Sam Bush Over a year ago

each list will be updates dynamically so they will need to stay seperate. It doesn't really need to be a table either. I was just toying with creating 3 <li> tags even. Honestly as long as they display like Name value value on every line I don't really care.

Niles Tanner Over a year ago

changed my answer to reflect horizontal presentation

Collectives™ on Stack Overflow

Angular repeat in tables

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related