Incremented numbers in ng-repeat Angular

Question

I want to run a counter on div-table-row like 0, 1, 2, 3, 4, ..... and will be printed in div-table-cell-size as marked below. How can I accomplish it?

I've seen these but I don't know know how to apply two ng-repeats:

Note: I'm very very very new to Angular.

<div class="div-table-row" ng-repeat="(label_inx, label_key) in design.labels">

     <div class="div-table-cell-label">
          {{ label_key.name }}
     </div>

     <div class="div-table-cell-size">
          <div ng-repeat="(size_inx, size_key) in design.sizes">
               {{ size_key.name }}-{{ print_counter_here }}
          </div>
     </div>

</div>

ng-repeat creates a $index variable that you could use. Just write {{$index}} or {{$parent.$index}} — Zack Argyle, Jul 22 '14 at 14:30

score 1 · Accepted Answer · answered Jul 22 '14 at 15:17

1

if design.labels is an Array, you can use {{label_inx}} since it will be the array index. Otherwise the comment from Zack Argyle should do the trick (in this case the {{$parent.$index}} ).

answered Jul 22 '14 at 15:17

Sabacc

789
6
13

So far it is what I wanted but just to make sure if I'm missing something. When I echo 'size_key.id' I get the ID string correctly but when I echo 'size_key.size-0' I get '0' although 'size-0' holds a sting value of "Inches". Is dash sign not acceptable? Should I concatenate? – BentCoder Jul 22 '14 at 16:02
the dash sign is not a valid token for a property name. Also an AngularJS expression will interpret a dash as a minus operator. – Sabacc Jul 22 '14 at 16:18

score 0 · Answer 2 · edited May 23 '17 at 12:07

you can use following syntax to get a counter (col) in nested ng-repeat. Although track by $index in still required, you don't need to use it in your logic since you have counter col.

ng-repeat="(col, t) in h.seats track by $index"

I have an array which i wanted to convert into a grid/matrix of column size 4. the following implementation worked for me. You can use the two counters : row and col as you like in side the nested ng-repeat

        <tbody>
            <tr ng-repeat="(row, y) in getNumber(h.seats.length, 3) track by $index">
                <td>{{row+1}}</td>
                <td class="text-primary" ng-class="appliedClass(!t.status)"
                    ng-repeat="(col, t) in h.seats track by $index"
                    ng-if="col >= (row)*3 && col < (row+1)*3">
                        <span ng-show="t.status"> X </span> 
                        <span ng-show="!t.status"> - </span>
                </td>
            </tr>
        </tbody>

For more details on how counter works: https://stackoverflow.com/a/35566132/5076414

Incremented numbers in ng-repeat Angular

2 Answers2