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

与えるNG-クラストライ。期待どおりに動作するはずです。私はangleが最初のレンダリング後に値を作成するだけだと思うので、cssはスタイルを適用しません。 – codemax

私は両方見事に見えることができます。 – Chetan

クラスを動的に行に追加し、必要なスタイルを指定できます。

<tr class="myrow"> 

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

出典

2016-11-11 08:35:33

あなたはディレクティブNG-クラス奇数= " 'クラス名' を" 使用することができます。

<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

tbodyにはng-repeat = "value in value"を指定する必要があります。 bodyのng-repeatはbody要素を繰り返します。

出典

2016-11-11 08:42:32

コードが表示されている場合、彼は反復オブジェクト内の各値の行が必要なので、彼のHTMLは正しいです。 –

オブジェクト内の各値の行が必要な場合のtbodyに再繰り返しを使用すると、HTMLがをvalue1 以下のようにようになります生成されたので、あなたはTRないTBODYにNG・リピートを使用する必要がありますこのような値2。 trに常に奇数型のクラスをつけているのはなぜですか？ –

私はそれがng-repeatせずに自分の意図した構造と一致するため、OPのためのソリューションは、<tr>に<tbody>から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テーブルの代替行の色付け

答えて

関連する問題