web-dev-qa-db-fra.com

Utiliser bootstrap collapse avec angularjs

J'essaie d'inclure le panneau pliable bootstrap ci-dessous dans mon application angulaire. Cependant, lorsque je clique sur "Développer", Angular semble voir href="#collapseOne" puis redirige vers la page d'accueil au lieu de réduire le panneau. Mon routage ressemble à ceci et je pense que la otherwise({redirectTo: '/home'}); cause le problème. Aucune suggestion?

angular.module('App')
.config(['$routeProvider', function($routeProvider) { 
$routeProvider.
  when('/users', {templateUrl: 'partials/users/user-list.html', controller: 'UserCtrl'}).
  when('/users/new', {templateUrl: 'partials/users/user-new.html', controller: 'UserNewCtrl'}).
  when('/users/:userid', {templateUrl: 'partials/users/user-detail.html', controller: 'UserDetailCtrl'}).


  otherwise({redirectTo: '/home'});
}]);

Le panel-

<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">
          Expand
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        ...
      </div>
    </div>
  </div>
  </div>
angularjstwitter-bootstrap
46
bookthief

Comme mentionné dans une question similaire Ici , changez simplement votre href par l'attribut data-target

<div class="panel-group" id="accordion">
  <div class="panel panel-default">
    <div class="panel-heading">
      <h4 class="panel-title">
        <a href="javascript:;" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
          Expand
        </a>
      </h4>
    </div>
    <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
        ...
      </div>
    </div>
  </div>
</div>
89
GuillaumeA

Vous pouvez utiliser la directive accordéon de AngularJS UI Bootstrap qui repose sur Twitter pour booter la directive collapse.

Exemple:

 <accordion >
    <accordion-group heading="Static Header, initially expanded" is-open="true">
      This content is straight in the template.
    </accordion-group>
 </accordion>

Exemple live: http://jsfiddle.net/choroshin/U89bW/3/

16
Alex Choroshin

J'avais le même problème et je ne voulais pas ajouter de bibliothèque supplémentaire au-delà de bootstrap. Comme recommandé, vous pouvez utiliserdata-target="#your-collapsing-element", en supprimant complètement l'attribut href. 

Les bases

Pour faire un panneau s'effondrer, vous avez besoin de:

  1. Sur l'élément utilisé pour déclencher le repli:

    data-toggle="collapse" data-target="#my-collapsing-element"

  2. Sur l'élément qui s'effondre:

    id="my-collapsing-element"

  3. Sur l'élément qui englobe à la fois l'élément "trigger" et l'élément collapsing:

    class="panel"

Mettre tous ensemble

Vous pouvez éventuellement ajouter des éléments parents pour l'intégrer à un groupe et ajouter les classes css "collapse in" à l'élément collapsant pour que son état par défaut soit fermé. Un exemple complet:

<div id="accordion">
    <div class="panel">
        <a data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
            Heading 1
        </a>
        <div id="collapse1">
            Content for panel 1
        </div>
    </div>
    <div class="panel">
        <a data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
            Heading 2
        </a>
        <div id="collapse2" class="collapse in">
            Content for panel 2
        </div>
    </div>
</div>

Vous pouvez obtenir de meilleurs comportements de bouton en utilisant un élément <button> plutôt qu'un <a>. Il est possible de remplacer le style de bootstrap pour .panel en ajoutant votre propre style pour la classe panel css.

<div class="panel its-my-panel">

.panel.its-my-panel {
  margin-bottom: 0;
  background-color: transparent;
  border: none;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}


.my-panel-heading {
  cursor: pointer;
}
/* Overrides for .panel--theonly required bootstrap class */

.panel.my-panel-overrides {
  margin-bottom: 0;
  background-color: transparent;
  border: none;
  border-radius: 0;
  -webkit-box-shadow: none;
  box-shadow: none;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div id="accordion">
  <div class="panel my-panel-overrides">
    <a class="my-panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse1">
        Collapsible Group 1</a>
    <div id="collapse1" class="collapse in">
      Content for panel 1
    </div>
  </div>
  <div class="panel my-panel-overrides">
    <a class="my-panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse2">
        Collapsible Group 2</a>
    <div id="collapse2" class="collapse">
      Content for panel 2
    </div>
  </div>
  <div class="panel my-panel-overrides">
    <a class="my-panel-heading" data-toggle="collapse" data-parent="#accordion" data-target="#collapse3">
        Collapsible Group 3</a>
    <div id="collapse3" class="collapse">
      Content for panel 3
    </div>
  </div>
</div>

7
Benson
  1. Changez all href afin de développer-réduire en data-target.
  2. data-target et id de la div à développer et réduire ne doivent pas contenir de trait d'union.
2
Tejaswini Kadu

Cliquez sur les boutons ci-dessous pour afficher et masquer un autre élément via les modifications de classe:

  • collapse masque le contenu 

  • collapsing est appliqué pendant les transitions

  • collapse .in affiche le contenu

Vous pouvez utiliser un lien avec l'attribut href ou un bouton avec l'attribut data-target. Dans les deux cas, le data-toggle = "collapse" est requis.

vérifiez cet exemple ci-dessous.

Exemple Bootsrap

<div class="panel-group" id="accordion">
   <div class="panel panel-default">
      <div class="panel-heading">
      <h4 class="panel-title">
       <a href="javascript:;" data-toggle="collapse" data-parent="#accordion" data-target="#collapseOne">
        Expand
       </a>
     </h4>
   </div>
   <div id="collapseOne" class="panel-collapse collapse in">
      <div class="panel-body">
    ...
   </div>
 </div>

 

0
Kondal