Le basculement de l'accordéon icônes de panneau avec ng-classe et ng-cliquez sur
J'ai un accordéon "chevron" icônes qui sont basculés à point vers le haut ou vers le bas lorsque vous cliquez dessus, cela se fait avec ng-click
et ng-class
. L'accordéon permet uniquement à un panneau à être ouverts en même temps - de sorte que quand je clique sur un panneau qui est fermé, le panneau est ouvert se ferme. Mais comment puis-je basculer le chevron icône sur le panneau qui est fermé avec ng-click
?
À l'origine, je pouvais le faire avec de manipulation du DOM, etc, mais puisque c'est une vue partielle en angulaires je ne peut pas le faire.
Code:
<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>
OriginalL'auteur bjornasm | 2014-08-06
Vous devez vous connecter pour publier un commentaire.
Je vous recommande de vérifier 'UI Bootstrap" de la AngularUI de l'équipe. C'est une collection de "Bootstrap composants écrits en pur AngularJS".
http://angular-ui.github.io/bootstrap/
Leur site web offre un exemple qui montre leur Accordéon directive à l'aide de
ng-class
pour basculer le chevron icônes.http://angular-ui.github.io/bootstrap/#/accordion
Leurs directive dispose également d'un
close-others
attribut qui, si elle est vraie, assurera un seul panneau est ouvert à tout moment.OriginalL'auteur Andrew Sula
C'est ce que j'ai essayé et il semble fonctionner
Dans mon contrôleur, j'ai
Dans mon html j'ai
OriginalL'auteur Clinton
Comment sur le travail avec les CSS? Bootstrap ajoute une classe
collapsed
sur lehtml
élément qui a ledata-toggle="collapse"
. Lorsque le clapet s'ouvre, il supprime cettecollapsed
classe. On peut alors travailler aveccss
, par exemple, de tourner lespan
élément (un enfant de l'élément qui a ledata-toggle
attribut).REMARQUE IMPORTANTE : Assurer
collapsed
de la classe est ajouté à l'élément qui a ledata-toggle="collapse"
attribut pour que cela fonctionne bien. Sinon, sur le chargement initial de l'élément, lespan
élément ne tourne pas comme prévu la première fois.vous devez vous assurer de la
bootstrap.css
est chargé dans le<head> tag
et la<script> tags
doit être placé juste avant laclosing body tag - </body>
. Cela permettra d'assurerglyphicons
sont disponibles lorsque la page est chargée. Peut-être aussi d'explorerng-cloak
et stackoverflow.com/a/18133519/4742733...OriginalL'auteur Akash
Fait quelques recherches, j'ai été en mesure d'utiliser cette méthode pour ajouter la classe
open
à lapanel-header
lorsqu'il est basculé ouvrir. C'est l'exemple permet de multiples panneaux à ouvrir et utilise Angulaire De La Sangle De L'Effondrement.Modèle:
JS dans le contrôleur:
OriginalL'auteur BrandonReid
La solution la plus simple que j'ai jamais pense. Et de ne pas utiliser n'importe quel contrôleur,
Vous pouvez écrire similaires comme moi.
OriginalL'auteur Ashraful Islam
Après quelques recherches, j'en ai une façon de résoudre ce problème.
JS:
Modifié ng-cliquez sur le premier volet:
vice versa, sur le deuxième volet.
Je ne pense pas que c'est toute une élégante solution, surtout si nous avons eu plus de deux volets, mais il fonctionne.
OriginalL'auteur bjornasm
Vous pouvez utiliser bootstrap (testé à 4+) de l'effondrement et les styles suivants pour basculer le bouton;
De travail entièrement snipplet;
https://js.do/code/changecollapseicon
OriginalL'auteur Kemal Kaplan