如何设置对角手风琴头类时窗格打开？ [英] How to set a class on angular accordion header when pane is open?

问题描述

我使用的角度UI引导Accordion组件，从这里。

I am using the Angular UI Bootstrap accordion component, 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>

控制器是非常基本的，和在这里如果有兴趣。

我所试图做的是显示一个三角形手风琴头旁边，并让他们切换到显示窗格中打开。

What I am trying to do is display a disclosure triangle next to the accordion headers, and have them switch to show that the pane is open.

我已经做了所有必要的LESS / CSS显示使用伪类之前一单code字符。我有封闭的类和一个开放。

I have done all the necessary LESS/CSS to display a unicode character using the pseudoclass "before". I have one class for closed and one for open.

我想不通的事情是如何的轻松的检测特定头有一个开放的窗格。该类切换上的内容的，而不是头。我想用一个类，而不是一个简单的切换做它，所以它也将工作，如果窗格的默认即可打开。

The thing I can't figure out is how to easily detect that a particular header has an open pane. The class is toggled on the content, not the headers. I'm trying to do it with a class instead of a simple toggle so it will also work if the pane is defaulted to opened.

思考？

推荐答案

有点打后（因为AngularJS是新的我），这里有一个工作的例子：

After a bit of playing (since AngularJS is new to me), here's a working example:

首先，你必须从你的照片glyphicons V形，但不是的人，虽然我们可以很容易地在CSS创建它们：

First, you have chevrons in glyphicons but not the ones from your picture, although we can easily create them in 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>

的是开=status.isFirstOpen表示该手风琴元素应该是默认打开。

The is-open="status.isFirstOpen" indicates that this accordion element should be open by default.

纳克级={'尖向下：status.isFirstOpen，脱字右'：status.isFirstOpen} 说，如果它是开放的（的 status.isFirstOpen 的），适用尖向下 css类，如果它不开放，适用插入符号向右 CSS类。

ng-class="{'caret-down': status.isFirstOpen, 'caret-right': !status.isFirstOpen} says that if it is open (status.isFirstOpen), apply the caret-down css class and if it is not open, apply the caret-right css class.

的 status.isFirstOpen 是最初的切换，你可以使用其他 status.open 。

The status.isFirstOpen is for the initial toggle, for the rest you can use status.open.

演示

DEMO

这篇关于如何设置对角手风琴头类时窗格打开？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！