我有被触发点向上或向下点击时，这与ng-click和ng-class做“人字形”图标的手风琴。手风琴只允许一个面板保持在同一时间打开 - 所以当我点击时关闭的面板，即开关闭面板上。但我怎么切换，这是获得与ng-click关闭开启面板上的V形图标？
本来我可以用DOM操作等做到这一点，但由于这是一个局部视图的角度，我不能做到这一点。
码：
<div class="panel-group" id="accordion">
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" ng-click="firstpaneisopen=!firstpaneisopen">
<i class="glyphicon" ng-class="{'glyphicon-chevron-up': firstpaneisopen, 'glyphicon-chevron-down': !firstpaneisopen}"></i> Collapsible Group Item #1
</a>
</h4>
</div>
<div id="collapseOne" class="panel-collapse collapse in">
<div class="panel-body">
Body
</div>
</div>
</div>
<div class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" ng-click="secondpaneisopen=!secondpaneisopen>
<i class="glyphicon" ng-class="{'glyphicon-chevron-up': secondpaneisopen, 'glyphicon-chevron-down': !secondpaneisopen}"></i> Collapsible Group Item #2
</a>
</h4>
</div>
<div id="collapseTwo" class="panel-collapse collapse">
<div class="panel-body">
Body
</div>
</div>
</div>
</div>
我建议你从AngularUI团队签出“UI自举”。这是“用纯AngularJS引导部件”的集合。
http://angular-ui.github.io/bootstrap/
他们的网站上有这表明他们的手风琴指令使用ng-class来切换字形图标的示例。
http://angular-ui.github.io/bootstrap/#/accordion
他们的指令还设有一个close-others属性，如果属实，将确保只有一个面板是在任何一个时间开放。
<accordion close-others="true">
这是我试过，似乎工作
在我的控制器我有
$scope.menuStatus = [ { isOpen : true },
{ isOpen : false },
{ isOpen : false } ]
在我的HTML我有
<accordion id='cntLeftMenu' close-others='false'>
<accordion-group is-open='menuStatus[0].isOpen'>
<accordion-heading class='menu-title'>
Cars <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menuStatus[0].isOpen , 'glyphicon-chevron-right': !menuStatus[0].isOpen }"></i>
</accordion-heading>
<ul class='left-menu'>
<li><a href=''>test1</a></li>
<li><a href=''>test1</a></li>
<li><a href=''>test1</a></li>
</ul>
</accordion-group>
<accordion-group is-open='menuStatus[1].isOpen'>
<accordion-heading class='menu-title'>
Customers <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menuStatus[1].isOpen , 'glyphicon-chevron-right': !menuStatus[1].isOpen }"></i>
</accordion-heading>
<ul class='left-menu'>
<li><a href=''>test1</a></li>
<li><a href=''>test1</a></li>
<li><a href=''>test1</a></li>
</ul>
</accordion-group>
<accordion-group is-open='menuStatus[2].isOpen'>
<accordion-heading class='menu-title'>
Staff <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': menuStatus[2].isOpen , 'glyphicon-chevron-right': !menuStatus[2].isOpen }"></i>
</accordion-heading>
<ul class='left-menu'>
<li><a href=''>test1</a></li>
<li><a href=''>test1</a></li>
<li><a href=''>test1</a></li>
</ul>
</accordion-group>
<accordion>
如何使用CSS？引导补充说，有collapsed的html元素类data-toggle="collapse"。当滑盖打开时，它会删除该collapsed类。然后，我们可以用css工作，例如，旋转span元素（具有data-toggle属性的元素的子元素）。
<style>
button.collapsed span {
transform: rotate(-90deg);
}
</style>
<button type="button" class="btn btn-info collapsed" data-toggle="collapse" data-target="#demo">
Simple collapsible
<span class="glyphicon glyphicon-chevron-down"></span>
</button>
<div id="demo" class="collapse">
Lorem ipsum dolor...
</div>
重要提示：确保collapsed类添加到具有data-toggle="collapse"属性这一工作的顺利开展的元素。否则，该元素的初始加载时，span元素并不如预期第一次旋转。
做了一些研究，我能够用this method当它切换到开放类open添加到panel-header。这是例如允许多个面板是开放的，并使用Angular Strap Collapse。
模板：
<div class="panel-group"
role="tablist"
data-ng-model="multiplePanels.activePanels"
data-allow-multiple="true"
data-bs-collapse>
<div class="panel panel-default" ng-repeat="location in locations">
<div class="panel-heading"
role="tab"
data-ng-class="{'open' : multiplePanels.activePanels.indexOf($index) > -1}"
bs-collapse-toggle>
<h3>Some Header Stuff</h3>
</div>
<div class="panel-collapse" role="tabpanel" bs-collapse-target>
<div class="panel-body">
<p>Stuff in the panel body...</p>
</div>
</div>
</div>
</div>
JS控制器：
$scope.multiplePanels.activePanels = [];
我曾经遇到的最简单的解决方案的想法。并且不使用任何控制器，
<div
class="fa fa-fw list-arrow"
ng-class="{'fa-angle-down': isClicked, 'fa-angle-right' : !isClicked}"
ng-click="isClicked = !isClicked">
</div>
你可以写我一样相似。
您可以使用引导程序（在4+测试）崩溃和下面的风格切换按钮;
<style>
[id^='particon'] {
display: block !important;
}
[id^='particon']:after {
font-family: 'Glyphicons Halflings';
color: grey;
}
[id^='particon'].collapse:after {
content: "\e081";
}
[id^='particon'].collapse.show:after {
content: "\e082";
}
/*optional*/
[id^='particon'].collapsing {
transition: none;
}
</style>
对于完全工作snipplet;
经过一番研究，我得解决这个问题的方法之一。
JS：
$scope.firstpaneisopen = false;
$scope.secondpaneisopen = false;
第一窗格修改NG-点击：
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" ng-click="firstpaneisopen=!firstpaneisopen; secondpaneisopen=false">
在第二面板中，反之亦然。
我不认为这是任何优雅的解决方案，特别是如果我们有超过两个窗格，但它的作品。