用ng-repeat在html表格中替换行着色

我有一个表格，它使用ng-repeat填充值。我需要用绿色和黄色交替着色表格的行。我尝试了下面的方式没有ng-repeat，它的工作原理。用ng-repeat在html表格中替换行着色

.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-重复如下它不工作（全部行以黄色本身）。请帮助。提前感谢。

.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>

来源

2016-11-11 AngularDoubts

给纳克级一试。它应该按预期工作。我怀疑角度只会在第一次渲染后创建值，这会导致CSS不应用样式。 – codemax

我可以看到两者似乎都很好。 – Chetan

您可以动态地为行添加一个类，然后给出您想要的样式。

<tr class="myrow"> 

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

来源

2016-11-11 08:35:33

您可以使用该指令纳克级的奇= “ '类名'”。

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

这也摆脱你的！重要的这通常被认为是不好的做法。

来源

2016-11-11 08:34:43

我也删除了表格条带类。谢谢。 – AngularDoubts

我认为你应该给ng-repeat =“value in value”来不要tbody。你在身体上重复将重复身体元素。

来源

2016-11-11 08:42:32

如果您看到代码，他希望迭代对象中的每个值都有一行，所以他的HTML是正确的。 –

如果你想，因为使用上TBODY再重复生成的HTML将是在对象中的每个值的行，那么你应该使用TR上没有TBODY NG重复像下面值1 值2 这样。这就是为什么它总是附加tr的奇怪类型。 –

虽然我认为OP的解决办法从<tbody>被移动到ng-repeat<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>

来源

2016-11-11 09:19:41 Icycool

用ng-repeat在html表格中替换行着色

回答

相关问题