UI Bootstrap 2.5 无法根据打开或关闭的手风琴改变雪佛龙

【问题标题】：UI Bootstrap 2.5 can't get chevron to change based on open or closed accordionUI Bootstrap 2.5 无法根据打开或关闭的手风琴改变雪佛龙
【发布时间】：2017-05-11 13:03:44
【问题描述】：

稍微仔细地遵循文档，进行了一些更改。当手风琴打开时，无法使人字形字形向上指向。代码 sn-p 中的最后 10 行左右是我一直在关注的：

http://angular-ui.github.io/bootstrap/#!#accordion

无论如何，这就是我所拥有的。无论手风琴是打开还是关闭，它仍然只是指向下方。这是我的 HTML（我没有与之关联的自定义 JS，只使用 UI Boostrap 库附带的内容）：

<uib-accordion close-others='oneAtATime=true'>
    <div class='detail-menu' uib-accordion-group is-open='false'>
        <uib-accordion-heading>
             Job Descriptions <i class='pull-right glyphicon' ng-class='{"glyphicon-chevron-up": status.open, "glyphicon-chevron-down": !status.open}'></i>
        </uib-accordion-heading>                
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
    </div>
</uib-accordion>

不确定我忽略了什么。

【问题讨论】：

标签： angularjs twitter-bootstrap angular-ui-bootstrap

【解决方案1】：

这里的问题在于is-open="false"。了解手风琴是否打开的方法是将$scope 或控制器变量传递给is-open。在这里，您没有参考。

因此，更改 is-open="status.open" 可以让您参考它，然后您可以访问它以显示您最喜欢的图标。

<uib-accordion close-others='oneAtATime'>
    <div class='detail-menu' uib-accordion-group is-open='status.open'>
        <uib-accordion-heading>
             Job Descriptions <i class='pull-right glyphicon' ng-class='{"glyphicon-chevron-up": status.open, "glyphicon-chevron-down": !status.open}'></i>
        </uib-accordion-heading>                
        <li>Test 1</li>
        <li>Test 2</li>
        <li>Test 3</li>
    </div>
</uib-accordion>

如果您想在开头保留false，只需初始化status 而不使用open 或从控制器将其设置为false（请参阅下面的plunker）

working plunker

【讨论】：