Sam Bush Sam Bush - 3 months ago 8
Javascript Question

Angular repeat in tables

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

Answer

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>