angularjs - 如何在 Accordion Bootstrap 中使奇偶行具有不同的颜色？

Question

我在 angularjs 项目中使用 Accordion 。

我想在 Accordion 中制作标题行，甚至是奇数不同的颜色。

这是我的 View 模板:

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

它在 View 中的外观如下:

这是我想要的 View :

我尝试添加这些行:

ng-class-odd="'blueStyle'" 

ng-class-even="'greenStyle'"

到这一行:

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

但我没有得到想要的结果。

知道如何在 Accordion Bootstrap 中使奇偶行具有不同的颜色吗？

Answer 1

与 CSS3 nth-child() selector ，这样的事情应该可以工作:

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()