I want 10 buttons representing digits. super easy, just ng-repeat 0-9 and i have it.

How do I make it look like this:

789
456
123

instead of 0123456789

something like 'for every third repeat create a new line' ??

All I can think of is something like:

{{ x == 3 || 6 || 9 ? return "<br>" }}

but there is probably a more logical approach. I'm new to this all

I want 10 buttons representing digits. super easy, just ng-repeat 0-9 and i have it.

How do I make it look like this:

789
456
123

instead of 0123456789

something like 'for every third repeat create a new line' ??

All I can think of is something like:

{{ x == 3 || 6 || 9 ? return "<br>" }}

but there is probably a more logical approach. I'm new to this all

• javascript
• angularjs

• Seems like you're looking for the modulo operator {{ x%3 === 0 ? return "<br>" }} – Chris Commented Mar 18, 2015 at 8:43

3 Answers 3

Something along the lines of

ng-repeat="dinosaur in [9,8,7,6,5,4,3,2,1]"

on your element and if using bootstrap make each element have class .col-xs-4 which should cause them to wrap every 3. Another option might involve a

ng-if="!($index%3)"

which would show the element every third item.

To make sure that I covered the whole question.

Given: 0123456789

Solution:

$scope.items = [1, 2, 3, 4, 5, 6, 7, 8, 9];

<span ng-repeat="item in items | orderBy : item : true">
    <br ng-if="!($index % 3)" />
</span>

This can make a trick.

Third argument of "orderBy" will reverse the order and the goal is to check the $index which is an iterator inside ng-repeat directive.

Something Like:

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<span ng-app ng-repeat="i in [1,2,3,4,5,6,7,8,9]">
   <span>{{i}}<span> 
   <span ng-if="!(i%3)"> <br/><span>
</span>
     

Happy Helping!