Comment changer l'icône sur un bouton lors de l'effondrement avec AngularJS?

J'ai ce bouton

<button class="btn" ng-click="isCollapsed = !isCollapsed"><i class="icon-fullscreen"></i>Details</button>

Et quand je clique dessus, je voudrais changer pour

<button class="btn" ng-click="isCollapsed = !isCollapsed"><i class="icon-resize-small"></i>Details</button>

et le faire revenir avec icon-fullscreen lors de l'effondrement.

Est-il un AngularJS façon de le faire?

OriginalL'auteur Charles Hamel | 2013-08-01

  1. 13

    Je pense que cela pourrait faire l'affaire:

    <button class="btn" ng-click="isCollapsed = !isCollapsed">
  <i ng-class="{'icon-resize-small': isCollapsed, 'icon-fullscreen': !isCollapsed}"></i>Details
</button>

    Dans ce cas, votre i aurait la classe icon-resize-small quand isCollapsed est vrai, et icon-fullscreen quand il n'est pas vrai. Voici la la documentation.

    Lors du passage d'un objet de paires clé-valeur ngClass, les clés représentent des classes qui seront appliquées si leur valeur true.

    OriginalL'auteur Elise

  2. 4
     <button ng-click="isCollapsed=!isCollapsed">
        <span   ng-class="{'glyphicon glyphicon-plus': isCollapsed, 'glyphicon glyphicon-plus': !isCollapsed }"></span>
      </button>
    Veuillez modifier avec plus d'informations. Code-et "essayer cette" réponses sont découragé, car ils ne contiennent pas de contenu disponible pour la recherche, et de ne pas expliquer pourquoi quelqu'un doit "essayer". Nous faisons un effort pour être une ressource pour la connaissance.
    * EXPLICATION DANS les COMMENTAIRES * Il existe de nombreuses façons que vous auriez besoin pour ce faire et selon l'endroit où vous utilisez cette fonction, j'ai énuméré quatre façons possibles où l'on serait de l'utiliser. Si vous le faites dans une directive, le code ressemblerait différents, comme indiqué ci-dessous. si vous voulez ajouter un peu de fonction inclus avec le changement d'icône, puis j'ai énuméré dans mes commentaires, certains scénarios. Pour moi, quand je faisais cela, j'ai besoin d'une fonction pour développer le panneau et c'est là que j'ai "somefunction()". Comme je l'ai dit en fonction de votre besoin, ici est quelques scénarios.
    Les commentaires sont transitoires et ne sont pas inclus dans les résultats de recherche, alors il est vraiment mieux pour modifier la réponse d'ajouter cette info. (Ce serait une bonne réponse à ce genre de choses, d'ailleurs!)

    OriginalL'auteur kupaff