クリックすると上下に切り替わる「シェブロン」アイコンのアコーディオンがあります。これはng-click
とng-class
で行われます。アコーディオンは同時に1つのパネルのみを開くことを許可します。つまり、閉じているパネルをクリックすると、開いているパネルが閉じます。しかし、ng-click
で閉じられている開いているパネルの山形アイコンを切り替えるにはどうすればよいですか?
もともと私はDOM操作などでそれを行うことができましたが、これはangularの部分的なビューであるため、行うことはできません。
コード:
<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 Bootstrap」をチェックすることをお勧めします。 「純粋なAngularJSで記述されたブートストラップコンポーネント」のコレクションです。
http://angular-ui.github.io/bootstrap/
彼らのウェブサイトには、ng-class
シェブロンアイコンを切り替えます。
http://angular-ui.github.io/bootstrap/#/accordion
彼らの指令はまた、close-others
属性。trueの場合、一度に1つのパネルのみが開かれるようにします。
<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での作業はどうですか? Bootstrapは、collapsed
要素にdata-toggle="collapse"
を持つクラスhtml
を追加します。スライドが開くと、この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
要素が最初に期待どおりに回転しません。
いくつか調査しましたが、 このメソッド を使用して、クラス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>
私と同じように書くことができます。
bootstrap(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>
完全に機能するスニペット用。
いくつかの調査の後、私はこれを解決する1つの方法を持っています。
JS:
$scope.firstpaneisopen = false;
$scope.secondpaneisopen = false;
最初のペインの変更されたng-クリック:
<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" ng-click="firstpaneisopen=!firstpaneisopen; secondpaneisopen=false">
2番目のペインではその逆です。
特に3つ以上のペインがある場合、これはエレガントな解決策ではないと思いますが、機能します。