UI Bootstrap 2.5 无法让 chevron 根据打开或关闭的手风琴进行更改

Question

仔细阅读文档，做了一些修改。当手风琴打开时，无法让人字形字形指向上方。代码片段中的最后 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>

不确定我忽略了什么。

Answer 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

UI Bootstrap 2.5 无法让 chevron 根据打开或关闭的手风琴进行更改

UI Bootstrap 2.5 can't get chevron to change based on open or closed accordion

twitter-bootstrap

angularjs

angular-ui-bootstrap