2

所以我目前正在将我的项目从 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>

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

4

2 回答 2

14

如果您使用来自http://angular-ui.github.io/bootstrap/的手风琴指令，并且希望在您的手风琴标题中有自定义 HTML，您可以使用<accordion-heading>里面的元素（而不是在属性<accordion-group>上中继）。heading

这是一个例子：

<accordion>
    <accordion-group>
      <accordion-heading>
        Put any HTML <strong>here</strong><i class="icon-book"></i>
      </accordion-heading>
      This content is straight in the template.
    </accordion-group>
  </accordion>

和工作plunk：http ://plnkr.co/edit/E4QtpTYpHkMmcZhUPZsK?p=preview

于 2013-04-24T11:31:45.580 回答
2

要模拟 jquery-ui 行为并根据状态更改图标，您还可以使用手风琴组中的 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

于 2013-08-20T13:06:49.400 回答