Question

HTML：

<div style="height: 106%; width: 100%; margin-left: 10px; position: relative; top: -10px">
  <div class="daycol daycolo">
    Mo</div>
  <div class="daycol daycole">
    Di</div>
  <div class="daycol daycolo">
    Mi</div>
  <div class="daycol daycole">
    Do</div>
  <div class="daycol daycolo">
    Sa</div>
</div>

CSS

  .daycol
  {
    height: 100%;
    width: 19.6%;
    float: left;
    background-color: rgb(215, 230, 238);
    text-align: center;
    vertical-align: top;
  }
  .daycolo
  {
    background-color: rgb(215, 230, 238);
  }
  .daycole
  {
    background-color: rgb(147, 182, 202);
  }

如果可能的话，我想使用ng-repeat创建内部Div，但是类样式是交替的。有没有办法做到这一点？

Answer 1

使用ng-class-odd和ng-class-even。这些指令的工作方式与ngClass完全相同，但它们与ngRepeat一起使用，仅对奇数（偶数）行有效。

此指令只能在ngRepeat：

的范围内应用

<div ng-repeat="...">
    <div class="daycol" 
        ng-class-odd="'daycolo'" 
        ng-class-even="'daycole'">
            {{...}}
    </div>    
</div>

Answer 2

您可以在css：http://plnkr.co/edit/jMaTWaFGnoXdlX2c2tBY?p=preview

中执行此操作

CSS

.daycol {
  background-color:grey;
}
.daycol:nth-child(2n+1) {
    background-color:#e9e9e9
}

HTML：

  <div style="height: 106%; width: 100%; margin-left: 10px; position: relative; top: -10px">
  <div class="daycol ">
    Mo</div>
  <div class="daycol ">
    Di</div>
  <div class="daycol ">
    Mi</div>
  <div class="daycol ">
    Do</div>
  <div class="daycol ">
    Sa</div>
</div>

使用ng-repeat时交替使用css样式

2 个答案: