CODEWITHSUNDEEP
javascriptangularjs
brucelee
brucelee

Reputation: 147

ng-repeat with a newline on every third repeat

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

Upvotes: 2

Views: 6999

Answers (3)

cchamberlain
cchamberlain

Reputation: 17956

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.

Upvotes: 3

Zeeshan Hassan Memon
Zeeshan Hassan Memon

Reputation: 8325

Something Like:

<script src="https://ajax.googleapis.com/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!

Upvotes: 1

kuzzmi
kuzzmi

Reputation: 189

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.

Upvotes: 1

Related Questions