5

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

您将看到奇怪的样式如何在 3rd Element 上不起作用。

这个问题有什么解决方法吗？

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

4

3 回答 3

18

这是一个已知的错误并已修复，为什么不更新到v1.2.16?
它按预期工作v1.2.16。

如果你想留下来，v1.2.15你应该使用 Morgan 的解决方案 ( ng-class+ )，或者在/$index中只包含一个类：ngClassOddngClassEven

<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 开始的，因此第一个元素 ( $index: 0) 被认为是奇数，而我们（人类）期望第一个元素被认为是偶数。因此，请确保您“反向”应用这些类。
方法也是如此ngClass + $index。

推荐的解决方案仍然是升级到v1.2.16.
以防万一，这里有一个包含所有 3 个v1.2.15解决方案的 plunkr。

于 2014-05-19T18:44:48.767 回答
4

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

另一种方法是ng-class与$index

这是 Plunkr 上的一个示例，它检查 $index 是否可被 2 整除

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

于 2014-05-19T18:32:25.283 回答
0 
**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)}"`
于 2014-09-02T18:15:44.043 回答