CODEWITHSUNDEEP
javascriptangularjsangularjs-ng-repeat
Velocibear
Velocibear

Reputation: 167

ng-repeat issue and html table

I am not sure how to get the range of my headerRow so that when I am ng-repeating the rows it knows how many there are to get the correct offset.

   <table class="table">
     <tr>
       <th ng-repeat="header in headerRow">{{ header }}</th>
     </tr>
     <tr ng-repeat="row in fewRows">
       <td>{{ row[need this to be the range of the length of the headerRow] }}</td>
     </tr>
   </table>

Upvotes: 0

Views: 68

Answers (2)

Jason Goemaat
Jason Goemaat

Reputation: 29194

So you're just using arrays for headerRow and row, and row can have more elements but not fewer than headerRow, but all indexes in the row and headerRow arrays correspond to the same fields? Seems like a weird way to operate, but you could repeat over your headerRow again just to get the index and use that with your row array...

 <tr ng-repeat="row in fewRows">
   <td ng-repeat="h in headerRow">{{ row[$index] }}</td>
 </tr>

I really can't see though where you would design it like that, a more elegant or meaningful way would be for rows to be objects and to have meaningful headers with the column name, etc. Then re-arranging the headerRow array would let you move/hide columns instead of just representing a different column count...

 <tr ng-repeat="row in fewRows">
   <td ng-repeat="h in headerRow">{{ row[h.columnName] }}</td>
 </tr>

Upvotes: 2

Callebe
Callebe

Reputation: 1097

in ngRepeat context you have access to a $index var that represent the index of loop. Try use it on your code.

{{ row[$index] }}

Upvotes: 0

Related Questions