尝试设置 AngularJS 手风琴标题的 ng-class 无济于事答案

【问题标题】：Trying to set ng-class of AngularJS accordion-heading does nothing尝试设置 AngularJS 手风琴标题的 ng-class 无济于事
【发布时间】：2014-03-10 02:04:24
【问题描述】：

我有一个手风琴，其中一些条目需要有一个标题，强调该组中的数据显示了需要注意的问题。我尝试使用带有“ng-class”的“手风琴标题”来表示“有错误”（来自引导程序），这取决于确定是否有需要注意的事情的方法。我已经尝试了几种变体，并且“类”属性永远不会在 HTML 中呈现。

这是我的 HTML 的摘录：

        <accordion close-others="false">
            <div ng-repeat="(name, dataSource) in dataSourceMap">
                <accordion-group>
                    <accordion-heading>
                        <span ng-class="{'has-error': anyFailuresInList(dataSource)}">
                            {{name}}
                        </span>
                    </accordion-heading>
                    {{anyFailuresInList(dataSource)}}
                </accordion-group>
            </div>
        </accordion>

enter link description here 文档中的示例表明这应该是可能的，即使该示例有点损坏（它似乎将类放在一个空的“i”元素上）。

【问题讨论】：

你的语法看起来是正确的。尝试在 UI-Bootstrap 网站上的 Plunkr example for the Accordion directive 中重现您的情况。
示例中的空“i”元素是行尾的展开/折叠图标。也许您的anyFailuresInList(dataSource) 调用没有产生您期望的值，这就是该类没有被应用的原因。尝试检查范围或显示调用结果（使用<span>{{anyFailuresInList(dataSource) | json}}</span> 或其他内容）以获取更多信息。
实际上，看起来它实际上是在应用这个类，它只是比我预期的更深。我的 CSS 或我对引导 CSS 的期望也有问题，因为应用该类并没有给我预期的样式。这是一个不同的问题。

标签： javascript angularjs twitter-bootstrap

【解决方案1】：

accordion-group 不支持ng-class。请改用类。如果要有条件地设置样式，可以使用? 运算符。例如：

<uib-accordion-group class="{{isSpecial ? 'special-style':''}}">

【讨论】：

【解决方案2】：

这可以通过将 css 类应用于组而不是直接应用标题来完成

    <div accordion-group is-open="node.active" is-disabled="node.active" ng-class="{'panel-active': node.active}" ng-repeat="(key,node) in nav.nodes">
         <div accordion-heading >{{node.title}}</div>  
    </div>

然后在你的 css 中更改第一个 DIV 的背面

.panel-active>div {
   background-color: #YourActiveColor;
   border-color: #YourActiveColor;
}

【讨论】：