javascript 如何在Angular JS中为行分配备用类?

6l7fqoea  于 2022-12-25  发布在  Java
关注(0)|答案(5)|浏览(105)

我想为表中的行指定备用类。我正在使用ng-repeat on

<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属性进行内部评估吗?
帮帮忙。谢谢!

exdqitrt

exdqitrt1#

为此,应该使用Angular 指令ngClassEven和ngClassOdd。
有关如何使用它们,请参阅文档部分
http://docs.angularjs.org/api/ng.directive:ngClassEven
http://docs.angularjs.org/api/ng.directive:ngClassOdd

k4emjkb1

k4emjkb12#

从Angular 文件..
使用ng类奇数ng类偶数

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

jexiocij3#

正如@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>
k4aesqcs

k4aesqcs4#

也可以直接在ng-repeat指令中使用ng-class-oddng-class-even指令。

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

这为每一行提供了很好的交替类:

这个例子取自下面的页面,它也演示了如何将JSON数据转换为友好的、响应性强的主视图页面:
Master-Views using AngularJS

jogvjijk

jogvjijk5#

改进了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>

相关问题