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

到目前为止，由于 n-child CSS选择器层次结构问题，我们的样式工作但所有目标元素都会受到影响。我们必须采取更好的行动：

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

它充当魅力。有关nth-of-type()

的更多信息

Answer 2

请参阅奇数行颜色类 https://docs.angularjs.org/api/ng/directive/ngClassOdd

请参阅偶数行颜色类 http://docs.angularjs.org/api/ng.directive:ngClassEven

Stackoverflow中的类似答案 click here

Answer 3

var now = new Date(); var getTheDate = (now.getDate() + "").slice(-1); console.log(getTheDate );和ng-class-odd属性适用于标准的Bootstrap 3.3.6 CSS类。

ng-class-even

DEMO on PLNKR。

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

3 个答案: