Is it possible to use a module with ng-if / ng-repeat?

Question

Using Angular ng-repeat, I am trying to create a carousel with 3 <div> in each <li> . I can easily create it with 1 div per slide, but I can’t get 3. Using js, I would usually use the module (%) to find out if the index is divisible by 3, and then open / close li there.

Can this be done with Angular?

This is what I have (1 element per slide):

 <ul carousel class="carousel"> <li class="slide" ng-repeat="item in item.list.items" ng-init="itemIndex = $index"> <div class="item">{{item}}</div> </li> </ul> 

This is what I am trying to achieve (3 elements per slide):

 <ul class="carousel"> <!-- slide 1, with 3 items --> <li class="slide"> <div class="item">Item 1</div> <div class="item">Item 2</div> <div class="item">Item 3</div> </li> <!-- slide 2, with 3 items --> <li class="slide"> <div class="item">Item 4</div> <div class="item">Item 5</div> <div class="item">Item 6</div> </li> <!-- and so on... --> </ul> 

Edit

This question has been marked as a duplicate of byherwood. The question is very clearly asked about the use of the module in ng-if, not the controllers. The proposed duplicate is close, but Betty St answers the exact question below, with sample code and a link. Thanks Betty!

Answer 1

You can use % or groupBy . I always use the module as described here: fooobar.com/questions/51362 / ...

Your solution should look like this:

 <ul carousel class="carousel"> <li class="slide" ng-repeat="_ in item.list.items" ng-if="$index % 3 == 0"> <div class="item" ng-repeat="i in [$index, $index + 1, $index + 2]" ng-init="item = item.list.items[i]"> <div ng-if="item">{{item}}</div> </div> </li> </ul> 

You need to add a div with ng-if inside the div.item to make sure the element exists;)

Answer 2

Look at the groupBy filter to group items into 3 groups.

https://github.com/a8m/angular-filter#groupby