ngClassOdd/ngClassEven 没有按预期工作答案

【问题标题】：ngClassOdd/ngClassEven not working as expectedngClassOdd/ngClassEven 没有按预期工作
【发布时间】：2015-05-14 02:51:59
【问题描述】：

使用 Angular 1.2.15 版本时，我发现了一个似乎从 1.2.2 版本开始直到 1.2.15 的错误。

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

您将看到奇怪的样式如何在第 3 个元素上不起作用。

这个问题有解决办法吗？

如果不是，升级或降级更有意义？

【问题讨论】：

它看起来只有在应用其中一种样式时才有效。一种可能的解决方法是将偶数样式设置为默认值，然后将其更改为奇数行（反之亦然）。

标签： css angularjs angularjs-ng-class-even angularjs-ng-class-odd

【解决方案1】：

这是一个已知错误并已修复，为什么不更新到 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 版没有重大变化（根据 changelog），所以升级应该是完全透明的。

更新：

为了完整起见，我应该提一下，可以选择使用ngRepeat 的$even/$odd 属性。例如：

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

_{注意：

由于ngRepeat 显示的项目列表是从0 开始的，所以第一个元素（$index: 0）被认为是奇数，而我们（人类）希望第一个元素被认为是偶数。因此，请确保“反向”应用这些类。
ngClass + $index 方法也是如此。}

推荐的解决方案还是升级到v1.2.16。
以防万一，here is a plunkr 使用所有 3 个v1.2.15 解决方案。

【讨论】：

好吧，我猜他现在已经找到了他正在寻找的选项，我很想看看他会选择什么。
@MorganDelaney：我们忘记了ngRepeat 公开的$even/$odd 属性。我认为现在 OP 拥有所有可用选项 :)
看起来升级是更安全/正确的方法，因为它是一个小升级
是的！我全力以赴升级！（我在最新的生产项目中使用了v1.3.0-beta.7 - 但不要告诉我的老板：P）

【解决方案2】：

从您的 Plunkr 看来，您根本没有在其中获得那个“共享”课程。

另一种方法是将ng-class 与$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">

【讨论】：

【解决方案3】：

**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)}"`

【讨论】：

嗯，这是另一个线程的复制和粘贴：stackoverflow.com/questions/18725832/…