CODEWITHSUNDEEP
angularjs
BentCoder
BentCoder

Reputation: 12740

Incremented numbers in ng-repeat Angular

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>

Upvotes: 0

Views: 1554

Answers (2)

Sacky San
Sacky San

Reputation: 1672

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

Upvotes: 0

Sabacc
Sabacc

Reputation: 789

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}} ).

Upvotes: 1

Related Questions