2013-08-27 13 views
14

Tworzę listę w ng-repeat, muszę podać wszystkie elementy li, które są nth dzieckiem ich ojca lub więcej, pewną klasę (w naszym ng-repeat oznacza to wszystkie dzieci, które mają indeks większy od środkowego). Na przykład, jeśli lista zawiera 10 elementów, muszę przyznać piątym, szóstym ... 10. li dzieciom klasę. Więc jeśli mój kod jest coś w tym -Ustawienie kątowe Klasa w powtórzeniu Ng

[ul] 
    [li ng-repeat="friend in friends"] 
     {{friend.name}} who is {{friend.age}} years old. 
    [/li] 
    [/ul] 

Co to jest możliwe i dobry sposób, aby przypisać klasę do dzieci ze średnim i wyższym indeksie? Moje warunki są takie, że nie powinienem zmieniać struktury html. Mogę dodać directives\filters lub dodać rzeczy do kontrolerów.

+0

po prostu dodaj coś takiego jak 'ng-class =" {'yourClass': $ index> friends.length/2} "' na li. – Yoshi

+2

który wygląda jak czarna magia, czy na pewno zadziała? –

+1

Tak, jestem prawie pewny;) Jeśli logika może ulec zmianie, można oczywiście wyodrębnić ją z widoku i pozwolić kontrolerowi zdecydować. Np .: 'ng-class =" someConrollerMethod ($ index, friends) "' – Yoshi

Odpowiedz

29

wystarczy użyć ng-class na wielokrotnego elementu np

<li 
    ng-repeat="friend in friends" 
    ng-class="{special: $index > friends.length/2 - 1}"> 

    {{friend.name}} 
</li> 

Demo: http://jsbin.com/iFigAYi/1/


lub wyciąg z logiką, takich jak:

<ul> 
    <li ng-repeat="friend in friends" ng-class="getClass($index, friends)"> 
    {{friend.name}} 
    </li> 
</ul> 

i

$scope.getClass = function getClass(idx, list) { 
    return { 
    special: idx > list.length/2 - 1 
    }; 
}; 
+1

Zauważyłem, że "specjalne" musi być w cudzysłowach – nuander

Powiązane problemy