Question

我正在使用Angular UI在手风琴中渲染小型数据库条目。在第一次试验中，我使用了bootstrap，但是当我整合AngularJS视图时，手风琴不再完全正常工作（空的href ......）。然后我用角度UI bootstrap one和默认模板替换了我的bootstrap手风琴。

我的问题是，在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}})

此处的目标是根据项目字段应用不同的样式（背景颜色和文本颜色）。此外，手风琴 - 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);">

[编辑] 我试图将accordion-headingLog类放在ng-class属性中，但它也不起作用。为了测试，我尝试将类和风格应用于手风琴的主体内部，并且效果很好。我认为accordionHeading指令不接受任何类或属性？如何在标题上动态应用样式然后???

[编辑] 另一个试验是建立我自己的模板。我能够将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的手风琴有一个accordionHeading指令，允许你包含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手风琴源代码https://github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js

Answer 2

我遇到了同样的问题，我的快速解决方案是更改CSS并将一个类添加到父“accordion-group”中：

<强>模板：

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

你也可以创建一个指令来改变孩子的类别，但我不相信这是最好的解决方案。

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

2 个答案: