Comment définir la classe, du style de l'accordéon tête Angulaire de l'INTERFACE utilisateur

Je suis en utilisant Angulaire de l'INTERFACE utilisateur pour rendre littel entrées de base de données dans un accordéon. Dans un premier essai, j'ai utilisé bootstrap, mais comme je l'ai intégré AngularJS points de vue, l'accordéon n'est pas plus pleinement de travail (vide href...). J'ai remplacé mon bootstrap accordéon angulaire UI bootstrap de l'un et le modèle par défaut.

Mon problème est que dans le démarrage de la version, j'ai réussi à stylisée de la rubrique en fonction de l'accordéon titre (j'ai été en utilisant le ng-repeat directive, et le ng de style à l'intérieur de la tête). J'ai essayé de faire la même chose avec Angulaire de l'INTERFACE utilisateur, mais même ma classe personnalisée n'est pas rendu.

Cet exemple de code a été génial de travailler avec bootstrap, mais pas plus avec l'interface utilisateur.bootstrap accordéon :

accordion-group.accordion-groupLog(ng-repeat="item in data.entries | filter:search") 
   accordion-heading.accordion-headingLog(ng-style="{backgroundColor: styles[item.importance-1].bkcolor, color: styles[item.importance-1].color}")
         {{item.title}}   ({{item.importance}})

Le but ici est d'appliquer un style différent (couleur d'arrière-plan et la couleur du texte sur la base d'un élément de terrain. En outre, la classe d'accordéon-headingLog est pour redimensionner l'accordéon taille par défaut.

Ici est un rendu du code :

<div class="accordion-groupLog accordion-group ng-scope" ng-repeat="item in data.entries | filter:search">
   <div class="accordion-heading">
      <a class="accordion-toggle ng-binding" ng-click="isOpen = !isOpen" accordion-transclude="heading">
......

Et je m'attendais à quelque chose comme :

<div class="accordion-groupLog accordion-group ng-scope" ng-repeat="item in data.entries | filter:search">
   <div ng-style="{backgroundColor: styles[item.importance-1].bkcolor}" class="accordion-heading accordion-headingLog" style="background-color: rgb(214, 24, 40);">

[MODIFIER]
J'ai essayé de mettre de l'accordéon headingLog classe avec ng-attribut de classe, mais il ne fonctionne pas non plus. Juste pour tester, j'ai essayé d'appliquer la classe et le style à l'intérieur du corps de l'accordéon, et il fonctionne bien. J'en conclue que le accordionHeading directive ne pas accepter n'importe quelle classe ou attribut ? Comment appliquer dynamiquement un style sur le titre alors ???

[MODIFIER]
Un autre essai a été de construire mon propre modèle. Je suis en mesure d'appliquer l'accordéon-headingLog classe à la position, mais comment puis-je définir un style personnalisable ? J'ai essayé d'utiliser ng de style et d'appliquer un style fixe, mais il ne fonctionne pas.

script(type="text/ng-template", id="template/accordion/accordion-group.html").
    div.accordion-group
    div.accordion-heading.accordion-headingLog(ng-style="{background-color: #123456")
       a.accordion-toggle(ng-click="isOpen = !isOpen", accordion-transclude="heading") {{heading}}
    div.accordion-body(collapse="!isOpen")
       div.accordion-inner(ng-transclude)

Qu'entendez-vous rendus code? Le bootstrap équivalent? Êtes-vous, par hasard, à l'aide de bootstrap3?

OriginalL'auteur GuillaumeA | 2013-10-20

angular-ui angularjs

8

Angulaire de l'INTERFACE utilisateur de l'accordéon a une accordionHeading directive qui permet d'inclure du HTML. L'exemple dans le code source:
```
//Use accordion-heading below an accordion-group to provide a heading containing HTML
//<accordion-group>
//  <accordion-heading>Heading containing HTML - <img src="..."></accordion-heading>
//</accordion-group>
```
Alors peut-être que vous pouvez faire quelque chose comme cela pour conditionnellement appliquer votre css personnalisé:
```
<accordion-group>
<accordion-heading ng-class="{'custom-style': item.title }"> Your Title </accordion-heading>
</accordion-group>
```
Ici est la Angular-UI Accordion code source https://github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js

En fait j'utilise déjà le accordionHeading directive. Vérifiez la deuxième ligne du premier bloc de code que je fournis. Mais peut-être que je pourrais essayer avec la ngClass attribut au lieu de la ngStyle.
Oh désolé, je vois ce qui est écrit en Jade maintenant. Est le ng de style en contradiction avec le " class="accordion-headingLog"? Je suppose que je suis un peu incertain de ce que le problème exact est.
Pas de problème. Je pense que je vais essayer d'utiliser ngClass pour mon accordéon-headingLog classe.
J'ai souvent référence à cette question lorsque l'on traite avec style conditionnel trucs dans Angulaire stackoverflow.com/questions/13813254/...

OriginalL'auteur TyndieRock

J'ai eu le même problème, la solution rapide pour moi a été de changer le CSS et ajouter une classe dans le parent "accordion-group":

Modèle:

<accordion close-others="true">
    <accordion-group ng-repeat="elem in group.elements" is-open="isopen" ng-class="{'collapsed': !isopen}">
        <accordion-heading ng-click="isopen=!isopen">
            {{ elem.name }} 
        </accordion-heading>
        This content is straight in the template.
    </accordion-group>
</accordion>

HTML:

<accordion close-others="true">
    <div class="panel-group" ng-transclude="">
        <!-- ngRepeat: elem in group.elements -->
        <div class="panel panel-default ng-isolate-scope collapsed" ng-repeat="elem in group.elements" is-open="isopen" ng-class="{'collapsed': !isopen}">
            <div class="panel-heading">
                <h4 class="panel-title">
                <a href="" class="accordion-toggle" ng-click="toggleOpen()" accordion-transclude="heading">
                    <span class="ng-binding ng-scope"> 2001 </span></a>
                </h4>
            </div>
            <div class="panel-collapse collapse" collapse="!isOpen" style="height: 0px;">
                <div class="panel-body" ng-transclude="">
                    <accordion-heading ng-click="isopen=!isopen" class="ng-scope"></accordion-heading>
                    <span class="ng-scope">
                        This content is straight in the template.
                    </span>
                </div>
            </div>
        </div>
    </div>
</accordion>

CSS:

accordion>.panel-group .panel.collapsed .panel-heading .accordion-toggle {
    color: #478fca;
    font-weight: 400;
    background-color: #F9F9F9;
}

Vous pouvez créer un directive de changer la classe des enfants en tant que bien, mais je ne crois pas que ce soit la meilleure solution.

OriginalL'auteur nipo

Vous devez vous connecter pour publier un commentaire.