web-dev-qa-db-fra.com

Basculement des icônes du panneau accordéon avec ng-class et ng-click

J'ai un accordéon avec des icônes "chevron" qui sont basculés pour pointer vers le haut ou le bas lorsque l'utilisateur clique dessus, ceci est fait avec ng-click et ng-class. L'accordéon ne permet d'ouvrir qu'un seul panneau à la fois. Par conséquent, lorsque je clique sur un panneau fermé, le panneau ouvert se ferme. Mais comment puis-je basculer l'icône en chevron sur le panneau ouvert qui se ferme avec ng-click? 

A l'origine, je pouvais le faire avec des manipulations DOM, etc., mais comme il s'agit d'une vue partielle angulaire, je ne peux 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>
angularjstwitter-bootstrapaccordionangularjs-ng-click
8
bjornasm

Je recommanderais que vous vérifiiez 'UI Bootstrap' de l'équipe AngularUI. C'est une collection de "composants Bootstrap écrits en pur AngularJS".

http://angular-ui.github.io/bootstrap/

Leur site Web contient un exemple qui montre leur directive Accordion en utilisant ng-class pour faire basculer les icônes en chevron.

http://angular-ui.github.io/bootstrap/#/accordion

Leur directive comporte également un attribut close-others qui, si true, garantira qu'un seul panneau est ouvert à la fois.

<accordion close-others="true">
3
Andrew Sula

C'est ce que j'ai essayé et ça a l'air de marcher

Dans mon contrôleur j'ai

$scope.menuStatus = [   { isOpen : true     },
                        { isOpen : false    }, 
                        { isOpen : false    } ]

Dans mon html j'ai

<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>
3
Clinton

Que diriez-vous de travailler avec CSS? Bootstrap ajoute une classe collapsed à l'élément html qui a le data-toggle="collapse". Lorsque la diapositive s'ouvre, elle supprime cette classe collapsed. Nous pouvons ensuite utiliser css pour, par exemple, faire pivoter l'élément span (un enfant de l'élément ayant l'attribut 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>

REMARQUE IMPORTANTE : Assurez-vous quecollapsedclass est ajouté à l'élément doté de l'attribut data-toggle="collapse" pour que cela fonctionne correctement. Sinon, lors du chargement initial de l'élément, l'élément span ne tourne pas comme prévu la première fois.

3
Akash

J'ai fait des recherches et j'ai pu utiliser cette méthode pour ajouter la classe open au panel-header lorsqu'elle est ouverte. Cet exemple permet d'ouvrir plusieurs panneaux et utilise Angular Strap Collapse .

Modèle: 

<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 dans le contrôleur:

$scope.multiplePanels.activePanels = [];
2
BrandonReid

La solution la plus simple à laquelle j'ai jamais pensé. Et ne pas utiliser de contrôleur,

<div 
  class="fa fa-fw list-arrow" 
  ng-class="{'fa-angle-down': isClicked, 'fa-angle-right' : !isClicked}" 
  ng-click="isClicked = !isClicked">
</div>

Vous pouvez écrire semblable à moi. 

2
Ashraful Islam

Après quelques recherches, j'ai un moyen de résoudre ce problème.

JS:

$scope.firstpaneisopen = false;
$scope.secondpaneisopen = false;

Ng modifié cliquez sur le premier volet:

<a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" ng-click="firstpaneisopen=!firstpaneisopen; secondpaneisopen=false">

vice versa sur le deuxième volet.

Je ne pense pas que ce soit une solution élégante, surtout si nous avons plus de deux vitres, mais cela fonctionne.

0
bjornasm

Vous pouvez utiliser bootstrap (testé dans 4+) réduit et les styles suivants pour basculer le bouton;

<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>

Pour snipplet pleinement fonctionnel;

https://js.do/code/changecollapseicon

0
Kemal Kaplan