Question

我正在使用Angular UI Bootstrap手风琴组件from here。

<div ng-controller="AccordionDemoCtrl">
                <div accordion close-others="oneAtATime">
                    <div accordion-group heading="Static Header, initially expanded" is-open="true">
                        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Officia aspernatur consequuntur sed pariatur laborum officiis asperiores repellat velit, omnis. Voluptate, illum animi? Veniam odit nemo repudiandae id blanditiis similique ullam consequuntur harum aut possimus deserunt sit odio sapiente, dolorum dolor!
                    </div>
                    <div accordion-group heading="{{group.title}}" ng-repeat="group in groups">
                        {{group.content}}
                    </div>
                    <div accordion-group heading="Dynamic Body Content">
                        <p>The body of the accordion group grows to fit the contents</p>
                            <button class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button>
                            <div ng-repeat="item in items">{{item}}</div>
                    </div>
                </div>
                <div class="checkbox">
                    <input type="checkbox" ng-model="oneAtATime"> <label class="checkbox">Open only one at a time</label>
                </div>
            </div>

控制器非常基本，and is here if interested。

我要做的是在手风琴标题旁边显示一个显示三角形，并让它们切换以显示该窗格已打开。

enter image description here

我已经完成了所有必要的LESS / CSS，使用“之前”的伪类显示一个unicode字符。我有一个课程关闭，一个课程开放。

我无法弄清楚的是如何轻松检测到特定标头有一个打开的窗格。该类在内容上切换，而不是在标题上切换。我正在尝试使用类而不是简单的切换，因此如果窗格默认打开，它也会起作用。

思想？

Answer 1

经过一段时间的游戏（因为AngularJS对我来说很新），这是一个有效的例子：

首先，你有字形的V形而不是你图片中的V形，尽管我们可以在css中轻松创建它们：

.caret-right {
display: inline-block;
vertical-align: top;
right: 0px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid #595959;
top:3px;
content: "";
}

.caret-down {
display: inline-block;
vertical-align: top;
right: 0px;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-top: 5px solid #595959;
top:5px;
content: "";
}

您的手风琴必须采用以下格式：

<accordion-group is-open="status.isFirstOpen">
  <accordion-heading>
     <i class="glyphicon" ng-class="{'caret-down': status.isFirstOpen, 'caret-right': !status.isFirstOpen}"></i> 
     Static Header, initially expanded
  </accordion-heading>This content is straight in the template.
</accordion-group>

is-open="status.isFirstOpen"表示此手风琴元素应默认打开。

ng-class="{'caret-down': status.isFirstOpen, 'caret-right': !status.isFirstOpen}表示如果它已打开（ status.isFirstOpen ），请应用caret-down css类，如果它未打开，请应用caret-right css class。

status.isFirstOpen用于初始切换，其余的可以使用status.open。

<强> DEMO

如何在窗格打开时在角度手风琴标题上设置类？

1 个答案: