用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表格中替換行着色

回答

相關問題