ngClassOdd/ngClassEven nie działa zgodnie z oczekiwaniami

Używając Angulara w wersji 1.2.15, znalazłem błąd, który wydaje się być uruchomiony w wersji 1.2.2 do 1.2.15.ngClassOdd/ngClassEven nie działa zgodnie z oczekiwaniami

Plunker Demo to reproduce

Html

<body ng-app=""> 
    <ol ng-init="names=['John', 'Mary', 'Cate', 'Suz','Felipe','Vero']"> 
    <li ng-repeat="name in names"> 
     <span ng-class-odd="'shared odd'" ng-class-even="'shared even'"> 
     {{name}} 
     </span> 
    </li> 
    </ol> 
</body

CSS

.shared {color: red;} 
.even{ background-color:yellow; } 
.odd{ background-color:white; }

Zobaczysz jak dziwny styl nie działa na 3. Element.

Czy istnieje obejście tego problemu?

Jeśli nie, to co zwiększyłoby sens lub obniżenie wersji?

Źródło

2014-05-19 Dalorzo

Wygląda na to, że działa tylko w przypadku zastosowania jednego ze stylów. Prawdopodobnym rozwiązaniem jest ustawienie domyślnego stylu parzystości, a następnie zmiana go na nieparzyste wiersze (lub odwrotnie). –

Był to znany błąd i został naprawiony, więc dlaczego nie aktualizuje się v1.2.16?
Działa zgodnie z oczekiwaniami na v1.2.16.

Jeśli chcesz pozostać na v1.2.15 należy użyć roztworu Morgan (ng-class + $index), lub zawierać tylko jedną klasę w ngClassOdd/ngClassEven:

<span class="shared" ng-class-odd="'odd'" ng-class-even="'even'">

BTW, nie było łamanie zmiany w wersji 1.2.16 (zgodnie z changelog), więc uaktualnienie powinno być całkowicie przezroczyste.

UPDATE:

Dla uzupełnienia należy wspomnieć, istnieje możliwość korzystania z ngRepeat „s $even/$odd właściwości. Np:

<span ng-class="$even?'shared odd':'shared even'">

_{Uwaga:
Ponieważ lista elementów wyświetlane przez ngRepeat jest oparty o 0, 1. Element ($index: 0) uważany jest nieparzysta, a my (ludzie) oczekiwać 1st elementem być uważanym za równego. Upewnij się więc, że klasy są "odwrotnie".
To samo dotyczy podejścia ngClass + $index.}

Zalecanym rozwiązaniem jest nadal upgrade do v1.2.16.
Na wszelki wypadek, here is a plunkr ze wszystkimi rozwiązaniami 3 v1.2.15.

Źródło

2014-05-19 18:44:48 gkalpak

Sądzę, że ma opcje, których szuka teraz, jestem ciekaw, co on wybiera. –

@MorganDelaney: Zapomnieliśmy o właściwościach '$ even' /' $ odd' ujawnionych przez 'ngRepeat'. Myślę, że ** teraz ** OP ma wszystkie dostępne opcje :) – gkalpak

Wygląda na to, że uaktualnienie jest bezpieczniejsze/poprawne, ponieważ jest to niewielkie uaktualnienie – Dalorzo

Z Twojego Plunkr wygląda na to, że po prostu nie dostajesz tam tej "udostępnionej" klasy.

Alternatywą może być użycie ng-class w połączeniu z $index

Here's an example on Plunkr which checks to see if $index is divisible by 2

<span ng-class="{ even: !($index % 2), odd: !!($index % 2) }" class="shared">

Źródło

2014-05-19 18:32:25

**The value of `ng-class-odd` and `ng-class-even` can be a string: `ng-class-odd="'myClass'"` or an expression `ng-class-odd="{myClass: boolExpression}"`** 

Also: 

**Angular 1.2+**: `ng-class="{even: $even, odd: $odd}"` 

    <ul> 
     <li ng-repeat="name in names"> 
      <span> ng-class="{even: $shared even, odd: `enter code here`$shared odd}">{{name}}</span> 

     </tr> 
    </ul> 
    <hr /> 

**Angular < 1.2** `ng-class="{even: !($index%2), odd: ($index%2)}"`

Źródło

2014-09-02 18:15:44 user3722785

Humm, to jest kopia i wklejanie innego wątku: http://stackoverflow.com/questions/18725832/angular-js-ng-class-odd-in-nested-ng-repeats – DarkUrse

ngClassOdd/ngClassEven nie działa zgodnie z oczekiwaniami

Odpowiedz

Powiązane problemy