AngularJS: Count iterations of ng-repeat

Question

Is it possible to use ng-repeat to make a grid of consecutive numbers?

I can use two ng-repeats to make a grid like this:

<table>
  <tr ng-repeat="c in [1, 2, 3]">
    <td ng-repeat="r in [1, 2, 3]">
            {{c * r}}
        </td>
    </tr>
</table>

Which outputs this:

1    2    3
2    4    6
3    6    9

But the output I want is:

1    2    3
4    5    6
7    8    9

Or is there a more appropriate angular directive I could use?

It shouldn't be the responsibility of the view to generate data. — Claies
– Claies, Commented Nov 7, 2015 at 3:17
Yep, definitely. But, this isn't data, it's for static UI elements — bdh
– bdh, Commented Nov 7, 2015 at 4:41

William · Accepted Answer · 2015-11-07 02:05:26Z

3

<table>
  <tr ng-repeat="c in [0, 1, 2]">
    <td ng-repeat="r in [1, 2, 3]">
            {{c * 3 + r}}
        </td>
    </tr>
</table>

Or, if you don't want to change the first array:

<table>
  <tr ng-repeat="c in [1, 2, 3]">
    <td ng-repeat="r in [1, 2, 3]">
            {{(c-1) * 3 + r}}
        </td>
    </tr>
</table>

answered Nov 7, 2015 at 2:05

William

3,0152 gold badges23 silver badges34 bronze badges

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

4 Comments

Enjoyed the answer! :)

this works only for this scenario.. will this work eg: 1,2,3,4 ??

@ramamoorthy_villi: well, if the array is called myArray then it's possible to replace 3 with myArray.length

Yes correct.. .but why this much complex expressions.. cant we do simple logic ?