Question

我有一个使用ng-repeat填充值的表。我需要用绿色和黄色交替对表格行进行着色。我在没有ng-repeat的情况下尝试了以下方法，但它确实有效。

.table-striped>tbody>tr:nth-of-type(odd)
    {
        background: yellow !important;
    }

    .table-striped>tbody>tr:nth-of-type(even)
    {
        background: green !important;
    }

<html>
  <div><table class="table table-striped">
        <thead style="border: 1px solid">
            <tr>
                <th>Heading</th>                
            </tr>
        </thead>
        <tbody>
           <tr>
                <td>{{value.val1}}</td>
             </tr>
          <tr>
                <td>{{value.val2}}</td>
            </tr>
          <tr>
                <td>{{value.val3}}</td>
            </tr>            
        </tbody>
    </table>
    </div>
  <html>

但是使用ng-repeat时它不起作用（所有行本身都是黄色的）。请帮忙。谢谢。

.table-striped>tbody>tr:nth-of-type(odd)
    {
        background: yellow !important;
    }

    .table-striped>tbody>tr:nth-of-type(even)
    {
        background: green !important;
    }

<html>
  <div><table class="table table-striped">
        <thead style="border: 1px solid">
            <tr>
                <th>Heading</th>                
            </tr>
        </thead>
        <tbody ng-repeat="value in values">
           <tr>
                <td>{{value.val1}}</td>
             </tr>
                      
        </tbody>
    </table>
    </div>
  <html>

Answer 1

我认为你应该将ng-repeat =“value in values”赋予tr而不是tbody。你在身体上重复会重复身体元素。

Answer 2

您可以使用指令ng-class-odd =＆＃34;＆＃39; classname＆＃39;＆＃34;。

<html>
  <div>
     <table class="table table-striped">
        <thead style="border: 1px solid">
            <tr>
                <th>Heading</th>                
            </tr>
        </thead>
        <tbody ng-repeat="value in values">
           <tr class="row-color" ng-class-odd="'odd'">
                <td>{{value.val1}}</td>
             </tr>
          <tr class="row-color" ng-class-odd="'odd'">
                <td>{{value.val2}}</td>
            </tr>
          <tr class="row-color" ng-class-odd="'odd'">
                <td>{{value.val3}}</td>
            </tr>            
        </tbody>
    </table>
    </div>
  <html>

然后在你的CSS中你可以做以下

.row-color {
    background: green;
}

.row-color.odd {
    background: yellow;
}

这也消除了你的重要性，这通常被认为是不好的做法。

Answer 3

您可以动态地向行添加类，然后提供所需的样式。

<tr class="myrow">

$(".myrow:odd").addClass("odditem");
$(".myrow:even").addClass("evenitem");

Answer 4

虽然我认为OP的解决方案是将ng-repeat从<tbody>移到<tr>，因为它与ng-repeat的预期结构相匹配;当ng-repeat在<tbody>图层上时，完全可以通过单独使用css进行着色。

tbody:nth-of-type(odd)>tr {
  background-color: pink;
}

tbody:nth-of-type(even)>tr {
  background-color: purple;
}

<table>
  <tbody>
    <tr><td>row1</td></tr>
  </tbody>
  <tbody>
    <tr><td>row2</td></tr>
  </tbody>
  <tbody>
    <tr><td>row3</td></tr>
  </tbody>
</table>

使用ng-repeat在html表中替代行着色

4 个答案: