如何在Angular JS中将替代类分配给行？

71

我想将替代类分配给表中的行。我在上使用ng-repeat

<tr ng-repeat="event in events">

我想要这样的输出：

<tr class="odd">...</tr>
<tr class="event">....</tr>

我已经试过了（无效）：

<tr ng-repeat="event in events" class="$index % 2 == 0? 'event' : 'odd'">

我无法正常工作。似乎Angular也在使用'class'属性。为什么这样做呢？我可以告诉AngularJS不要将class属性用于内部评估吗？

请帮忙。谢谢！

javascript angularjs

— 萨米尔·古普塔（Sameer Gupta）
source

1

这可能不是您问题的直接答案，但请看看CSS的偶数和奇数规则。如果可以使用它们，则无需使用类。

— Travesty3，2012年

谢谢！但实际上并不能回答我的问题。：-）无论如何谢谢。

— Sameer Gupta 2012年

如果您要构建一个表，则可能需要查看angular-ui.github.com/ng-grid这是我们上个月一直在努力的功能齐全的angularjs网格。

— timothyswt

93

您应该为此使用角度指令ngClassEven和ngClassOdd。

查看文档部分，了解如何使用它们

http://docs.angularjs.org/api/ng.directive:ngClassEven

http://docs.angularjs.org/api/ng.directive:ngClassOdd

希望这可以帮助。

— 加纳拉吉
source

11

您也可以完成ng-class =“ $ index％2 == 0 &&'even'||'odd'”。角表达式没有三元运算符，但可以使用and / or。

— 2012年

9

另一个选项：ng-class="['even', 'odd'][$index %2]"，class="{{['even', 'odd'][$index %2]}}"

— 阿尔乔姆·安德列夫

注意：// // ng-class =“ $ index％2 == 0 &&'even'||'odd'” // //稍微灵活一点，因为即使将过滤器应用于数据，它也保留行分割。

— dreftymac 2014年

AngularJS表达式中确实有三元表达式。我一直都在用它们。

— PKD

21

来自Angular文档

使用ng-class-odd ng-class-even

<li ng-repeat="name in names">
  <span ng-class-odd="'odd'" ng-class-even="'even'">
    {{name}}
  </span>
</li>

— 芬坦·科尔尼
source

9

由于@ganaraj指出ng-class-odd和ng-class-even是执行此操作的正确方法，但是为了搜索者的利益，您最初的建议离Angular> = 1.2.19的工作并不遥远。

这是一个密切相关的示例，该示例本来可以工作，并且如果着色的颜色多于其他行（例如，每3行），则也可以工作：

<div>
<style>
    .color0 {
        background-color: lightblue;
    }

    .color1 {
        background-color: lightyellow;
    }

    .color2 {
        background-color: lightgray;
    }
</style>


<div ng-repeat="result in results" ng-class="'color' + ($index % 3)">
    <div>
        <p>{{result.myText}}</p>
    </div>
</div>

— 曲棍球
source

6

您也可以在指令内直接使用ng-class-oddand指令。ng-class-evenng-repeat

<div class="cssOneProductRecord" 
   ng-repeat='..' 
   ng-class-odd="'cssProductOdd'" 
   ng-class-even="'cssProductEven'" >

这给我们每行漂亮的交替类：

在此处输入图片说明

该示例摘自以下页面，该页面还演示了如何将JSON数据转换为友好的响应式Master-View页面：

使用AngularJS的主视图

在此处输入图片说明

— 迈克·格莱德希尔
source

0

改善Fintan Kearney的答案，

来自：https : //docs.angularjs.org/api/ng/directive/ngClassOdd

Style.css

.odd {
  color: red;
}
.even {
  color: blue;
}

index.html

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

— 达尼洛
source