Czy modulus jest możliwy z ng-if/ng-repeat?

Question

Za pomocą kresek rgg, próbuję utworzyć karuzelę z 3 <div> s w każdym <li>. Mogę łatwo utworzyć go z 1 div na slajd, ale nie uda mu się uzyskać 3. Z js, zwykle użyłbym modułu (%), aby dowiedzieć się, czy indeks jest podzielny przez 3, a następnie otwórz/zamknij li tam.

Czy można to zrobić z Angular?

To, co mam (1 pozycja na slajd):

<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> 

To co staram się osiągnąć (3 pozycji na slajdzie):

<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> 

Edycja

To pytanie zostało oznaczone jako duplikat przez isherwood. Pytanie bardzo wyraźnie prosi o użycie modułu w ng-if, a nie kontrolerach. Sugerowany duplikat jest blisko, ale Betty St odpowiada dokładnie na pytanie poniżej, z próbką kodu i linkiem. Dzięki Betty!

Answer 1

Można użyć % lub groupBy. Zawsze używam moduł, jak opisano tutaj: https://stackoverflow.com/a/25838091/595152

Twoje rozwiązanie powinno wyglądać następująco:

<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> 

Trzeba dodać div z ng-if wewnątrz div.item aby upewnić się, że pozycja istnieje;)

Answer 2

Zapoznaj się z filtrem groupBy, aby zgrupować elementy w 3 grupach.

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