如何在 Angular UI 中设置手风琴标题的类/样式

Posted 2023-03-06

【中文标题】如何在 Angular UI 中设置手风琴标题的类/样式

【英文标题】：How to set class/style of accordion heading in Angular UI

【发布时间】：2013-10-29 04:26:27

【问题描述】：

我正在使用 Angular UI 在手风琴中呈现 littel 数据库条目。在第一次试验中，我使用了 bootstrap，但是当我集成了 AngularJS 视图时，手风琴不再完全工作（空的 href...）。然后我用 Angular UI bootstrap one 和默认模板替换了我的 bootstrap 手风琴。

我的问题是，在引导版本中，我设法根据手风琴标题对标题进行样式化（我使用的是 ng-repeat 指令，标题内使用了 ng-style）。我尝试对 Angular UI 做同样的事情，但即使是我的自定义类也没有呈现。

这个示例代码在 bootstrap 上运行良好，但在 ui.boostrap 手风琴上就不行了：

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 类用于调整手风琴默认大小。

这是渲染的代码：

<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);">

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

[编辑] 另一个尝试是构建我自己的模板。我可以将手风琴标题类应用于标题，但是如何设置可自定义的样式？我尝试使用 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)

【问题讨论】：

渲染代码是什么意思？引导等价物？您是否有机会使用 bootstrap3？

【参考方案1】：

我遇到了同样的问题，对我来说快速的解决方案是更改 CSS 并在父级“手风琴组”中添加一个类：

模板：

<accordion close-others="true">
    <accordion-group ng-repeat="elem in group.elements" is-open="isopen" ng-class="'collapsed': !isopen">
        <accordion-heading ng-click="isopen=!isopen">
             elem.name  
        </accordion-heading>
        This content is straight in the template.
    </accordion-group>
</accordion>

HTML：

<accordion close-others="true">
    <div class="panel-group" ng-transclude="">
        <!-- ngRepeat: elem in group.elements -->
        <div class="panel panel-default ng-isolate-scope collapsed" ng-repeat="elem in group.elements" is-open="isopen" ng-class="'collapsed': !isopen">
            <div class="panel-heading">
                <h4 class="panel-title">
                <a href="" class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading">
                    <span class="ng-binding ng-scope"> 2001 </span></a>
                </h4>
            </div>
            <div class="panel-collapse collapse" collapse="!isOpen" style="height: 0px;">
                <div class="panel-body" ng-transclude="">
                    <accordion-heading ng-click="isopen=!isopen" class="ng-scope"></accordion-heading>
                    <span class="ng-scope">
                        This content is straight in the template.
                    </span>
                </div>
            </div>
        </div>
    </div>
</accordion>

CSS：

accordion>.panel-group .panel.collapsed .panel-heading .accordion-toggle 
    color: #478fca;
    font-weight: 400;
    background-color: #F9F9F9;

您也可以创建一个指令来更改孩子的班级，但我认为这不是最好的解决方案。

【参考方案2】：

Angular-UI 的手风琴有一个手风琴标题指令，允许您包含 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

【讨论】：

事实上我已经使用了accordionHeading 指令。检查我提供的第一个代码块的第二行。但也许我可以尝试使用 ngClass 属性而不是 ngStyle 属性。

哦，抱歉，我看到现在是用 Jade 写的。 ng 风格是否与 class="accordion-headingLog" 冲突？我想我有点不确定到底是什么问题。

没问题。我想我会尝试将 ngClass 用于我的手风琴标题日志类。

在 Angular ***.com/questions/13813254/…987654322@

中处理条件样式时，我经常提到这个问题