如何在手风琴自举中使奇数偶数行成为不同的颜色？

Question

我在angularjs项目中使用手风琴.

我想用手风琴甚至奇怪的不同颜色制作标题行.

这是我的视图模板:

<div class="container">
    <div id="accordionWrapper">
        <accordion close-others="true">
            <!-- All Remaining Groups -->
            <accordion-group ng-repeat="inspection in inspections.inspectionsDamage" is-open="isOpen" >
                <accordion-heading>
                    <div class="text-center">
                        <strong>{{inspection.inspItemDesc}}</strong>
                        <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': isOpen, 'glyphicon-chevron-right': !isOpen}"></i>
                    </div>
                </accordion-heading>
                <div class="col-md-3 col-xs-6 small">
                    <label>fix type: </label> {{inspection.inspItemDesc}}<br>
                </div>
                <div class="col-xs-12"><hr></div>
            </accordion-group>
        </accordion>
    </div>
</div>

这是它在视图中的样子:

这是我理想的观点:

我试着添加这些行:

ng-class-odd="'blueStyle'" 

ng-class-even="'greenStyle'"

到这一行:

 <accordion-group ng-repeat="inspection in inspections.inspectionsDamage" is-open="isOpen" >

但我没有得到理想的结果.

任何想法如何在手风琴自举中使奇数偶数行成为不同的颜色？

Answer 1

使用 CSS3 nth-child()选择器,这样的东西应该工作:

accordion-group:nth-child(odd) {
/*background: #ff0000; your style here*/
}

accordion-group:nth-child(even) {
/*background: #0000ff;your style here*/
}

更新:

但正如迈克尔所说它不起作用!因为根本没有<accoridon-group >标记,所以将生成以下代码:

 <div class="panel panel-default" heading="Dynamic Group Header - 1" ng-repeat="group in groups">
   <div class="panel-heading" ng-keypress="toggleOpen($event)">
      <h4 class="panel-title"></h4>
       ...
   </div>
  </div>

因此,我们有.panel-default和.panel-heading:

.panel-default > .panel-heading:nth-child(odd){
   background:#00f5f5;
}

到目前为止,我们的样式仍然有效,但由于nth-child CSS选择器层次结构问题,所有目标元素都会受到影响.我们必须采取更好的行动:

.panel-default:nth-of-type(odd) .panel-heading{
  background:#00f5f5;
}

它充当魅力.关于nth-of-type()的更多信息