Javascript Girl
  1. Javascript Girl
  3. Images d'en-tête Accordian dans AngularUI
Intereting Posts
Javascript eventemitter plusieurs événements une fois Comment ouvrir une nouvelle fenêtre de navigateur avec javascript? XMLHttpRequest to Post HTML Form InnerHTML ne peut pas faire confiance: ne s'exécute pas toujours de manière synchrone Les enfants de la composante ne doivent pas être mutés Javascript document.getElementById dans d'autres cadres Accès aux données de nœud dans vis.js click handler Javascript: vérifiez la fenêtre ouverte en double Utilisation de jQuery / javascript Comment vérifier si le fichier JS (SP.JS) est déjà appelé dans une page? Trouver et mettre à jour dans l'objet json imbriqué sans changer la même valeur de paire de clés dans le chemin enfant différent Retour Meteor.http résultats en méthode Comment afficher l'aperçu de l'image avant de télécharger? ExtJs4 – Store baseParams config property? Construire une extension chrome pour télécharger des images (du presse-papiers) L'utilisation de innerHTML dans une boucle n'indique pas correctement l'ensemble des résultats de json

Images d'en-tête Accordian dans AngularUI

J'ai donc porté mon projet de jQuery à AngularJS, j'ai le code suivant dans jQuery

Code jQuery 

$(document).ready(function() { var icons = { header: "ui-icon-circle-arrow-e", activeHeader: "ui-icon-circle-arrow-s" }; $( "#Session" ).accordion({ icons: icons }); });

Je ne trouve aucune option d'icône dans AngularUI. Existe-t-il une solution de contournement pour ajouter des images d'en-tête dans l'accordéon AngularUI? Essayé d'utiliser la police génial pour les icônes 

 <accordion-group heading="My Current Sessions" class="icon-book"> <div>Content Goes here</div> </accordion-group>

Le code ci-dessus comporte une icône et un titre sur des lignes adjacentes, et non sur la même ligne.

Si vous utilisez la directive accordion de http://angle-ui.github.io/bootstrap/ et que vous voulez avoir un HTML personnalisé dans votre titre d'accordéon, vous pouvez utiliser l'élément <accordion-heading> dans le groupe <accordion-group> ( Au lieu de retransmettre l'attribut de l'en- heading ).

Voici un exemple: 

 <accordion> <accordion-group> <accordion-heading> Put any HTML <strong>here</strong><i class="icon-book"></i> </accordion-heading> This content is straight in the template. </accordion-group> </accordion>

Et le poste de travail: http://plnkr.co/edit/E4QtpTYpHkMmcZhUPZsK?p=preview

Pour imiter le comportement de jquery-ui et avoir l'icône modifiée en fonction de l'état, vous pouvez également utiliser l'attribut is-open en accordéon.

Voici un exemple qui fonctionne pour moi 

 <accordion close-others="false"> <accordion-group is-open="section1.isOpen"> <accordion-heading> <i ng-class="{true : 'icon-chevron-down', false : 'icon-chevron-right'}[!!section1.isOpen]"></i> <strong> SECTION 1</strong> </accordion-heading> CONTENT SECTION 1 </accordion-group> <accordion-group is-open="section2.isOpen"> <accordion-heading> <i ng-class="{true : 'icon-chevron-down', false : 'icon-chevron-right'}[!!section2.isOpen]"></i> <strong> SECTION 2</strong> </accordion-heading> CONTENT SECTION 2 </accordion-group> </accordion>

http://plnkr.co/edit/CODNWD7WiBHDfYHHuK7C?p=preview