Question

所以我现在将我的项目从jQuery移植到AngularJS，我在jQuery中有以下代码

jQuery代码

$(document).ready(function()
{
    var icons = {
      header: "ui-icon-circle-arrow-e",
      activeHeader: "ui-icon-circle-arrow-s"
    };

    $( "#Session" ).accordion({
      icons: icons
    });
});

我在AngularUI中找不到任何图标选项。是否有任何解决方法在AngularUI手风琴中添加标题图像？试图使用字体真棒图标

<accordion-group heading="My Current Sessions" class="icon-book">
      <div>Content Goes here</div>
</accordion-group>

上面的代码在相邻的行上有图标和标题，而不是在同一行。

Answer 1

如果您正在使用http://angular-ui.github.io/bootstrap/中的accordion指令并希望在您的手风琴标题中使用自定义HTML，则可以使用<accordion-heading>内的<accordion-group>元素（而不是{ {1}}属性）。

以下是一个例子：

heading

工作插件：http://plnkr.co/edit/E4QtpTYpHkMmcZhUPZsK?p=preview

Answer 2

要模拟jquery-ui行为并根据状态更改图标，您还可以使用accordion-group中的is-open属性。

这是一个适合我的例子

<accordion close-others="false">

  <accordion-group is-open="section1.isOpen">
    <accordion-heading>
      <i ng-class="{true : 'icon-chevron-down', false : 'icon-chevron-right'}[!!section1.isOpen]"></i>
      <strong> SECTION 1</strong>
    </accordion-heading>
  CONTENT SECTION 1
  </accordion-group>
  <accordion-group is-open="section2.isOpen">
    <accordion-heading>
      <i ng-class="{true : 'icon-chevron-down', false : 'icon-chevron-right'}[!!section2.isOpen]"></i>
      <strong> SECTION 2</strong>
    </accordion-heading>
  CONTENT SECTION 2
  </accordion-group>

</accordion>

http://plnkr.co/edit/CODNWD7WiBHDfYHHuK7C?p=preview

Angular UI中的手风琴标题图像

2 个答案: