angularjs - 如何在Angular UI中设置 Accordion 标题的类/样式

Question

我正在使用Angular UI来呈现 Accordion 中的小数据库条目。在第一次试用中，我使用了 bootstrap ，但是当我集成AngularJS View 时， Accordion 不再能完全正常工作(空href ...)。然后，我用 Angular UI bootstrap 1和默认模板替换了 bootstrap Accordion 。

我的问题是，在 bootstrap 版本中，我设法根据 Accordion 标题对标题进行了样式化(我使用的是ng-repeat指令，以及标题内的ng-style)。我试图对Angular UI进行同样的操作，但是即使我的自定义类也不会呈现。

该示例代码与bootstrap一起使用时效果很好，但与ui.boostrap Accordion 不再兼容:

accordion-group.accordion-groupLog(ng-repeat="item in data.entries | filter:search") 
   accordion-heading.accordion-headingLog(ng-style="{backgroundColor: styles[item.importance-1].bkcolor, color: styles[item.importance-1].color}")
         {{item.title}}   ({{item.importance}})

这里的目标是根据项目字段应用不同的样式(背景颜色和文本颜色)。此外， Accordion -headingLog类将调整 Accordion 的默认大小。

这是渲染的代码:

<div class="accordion-groupLog accordion-group ng-scope" ng-repeat="item in data.entries | filter:search">
   <div class="accordion-heading">
      <a class="accordion-toggle ng-binding" ng-click="isOpen = !isOpen" accordion-transclude="heading">
......

我期待着这样的事情:

<div class="accordion-groupLog accordion-group ng-scope" ng-repeat="item in data.entries | filter:search">
   <div ng-style="{backgroundColor: styles[item.importance-1].bkcolor}" class="accordion-heading accordion-headingLog" style="background-color: rgb(214, 24, 40);">

[编辑]
我试图将 Accordion -headingLog类与ng-class属性放在一起，但是它也不起作用。为了测试，我尝试将类和样式应用于 Accordion 的主体内，并且效果很好。我认为 Accordion 标题指令不接受任何类或属性？如何在标题上动态应用样式呢？

[编辑]
另一个试验是构建我自己的模板。我可以将 Accordion -headingLog类应用于标题，但是如何设置可自定义的样式？我尝试使用ng-style并应用固定的样式，但是它不起作用。

script(type="text/ng-template", id="template/accordion/accordion-group.html").
    div.accordion-group
    div.accordion-heading.accordion-headingLog(ng-style="{background-color: #123456")
       a.accordion-toggle(ng-click="isOpen = !isOpen", accordion-transclude="heading") {{heading}}
    div.accordion-body(collapse="!isOpen")
       div.accordion-inner(ng-transclude)

Answer 1

Angular-UI的 Accordion 具有 Accordion 标题指令，该指令允许您包含HTML。源代码中的示例:

// Use accordion-heading below an accordion-group to provide a heading containing HTML
// <accordion-group>
//   <accordion-heading>Heading containing HTML - <img src="..."></accordion-heading>
// </accordion-group>

因此，也许您可​​以执行以下操作来有条件地应用自定义CSS:

<accordion-group>
<accordion-heading ng-class="{'custom-style': item.title }"> Your Title </accordion-heading>
</accordion-group>

这是Angular-UI Accordion 源代码 https://github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js