ngClassOdd/ngClassEven не работает должным образом

Используя Angular версии 1.2.15, я обнаружил ошибку, которая, похоже, начиналась с версии 1.2.2 до 1.2.15.

Plunker Demo для воспроизведения

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

Вы увидите, как нечетный стиль не работает на 3-м элементе.

Есть ли обходной путь для этой проблемы?

Если нет, то что было бы более целесообразно обновить или понизить?

Источник

3 ответа

Решение

Это была известная ошибка, и она была исправлена, так почему бы не обновить до v1.2.16?
Работает как положено на v1.2.16,

Если вы хотите остаться на v1.2.15 вы должны либо использовать решение Моргана (ng-class + $index) или включить только один класс в ngClassOdd / ngClassEven:

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

Кстати, в версии 1.2.16 не было серьезных изменений (согласно журналу изменений), поэтому обновление должно быть полностью прозрачным.

ОБНОВИТЬ:

Для полноты картины я должен упомянуть, что есть возможность использования ngRepeat "s $even / $odd свойства. Например:

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

Замечания:
Поскольку список предметов отображается ngRepeat основано на 0, 1-й элемент ( $index: 0 ) считается странным, в то время как мы (люди) ожидаем, что 1-й элемент будет считаться четным. Итак, убедитесь, что вы применяете классы "обратно".
То же самое верно для ngClass + $index подход.

Рекомендуемое решение по-прежнему для обновления до v1.2.16,
На всякий случай вот плункр со всеми 3 v1.2.15 решения.

Источник

Из вашего Plunkr похоже, что вы просто не получаете этот "общий" класс там.

Альтернативой может быть использование ng-class в сочетании с $index

Вот пример на Plunkr, который проверяет, делится ли $index на 2

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

Источник 
**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)}"`
Источник
Другие вопросы по тегам