Come impostare la classe/lo stile dell'intestazione di fisarmonica nell'interfaccia utente angolare

Question

Sto utilizzando l'interfaccia utente angolare per eseguire il rendering di poche voci del database in una fisarmonica. In una prima prova, ho usato bootstrap, ma come ho integrato le viste AngularJS, la fisarmonica non funziona più completamente (href vuoto ...). Ho quindi sostituito la mia fisarmonica bootstrap con uno bootstrap UI angolare e il modello predefinito.

Il mio problema è che nella versione di bootstrap, sono riuscito a stilizzare l'intestazione in base al titolo della fisarmonica (stavo usando la direttiva ng-repeat e lo stile ng all'interno dell'intestazione). Ho provato a fare lo stesso con l'interfaccia utente angolare, ma anche la mia classe personalizzata non è renderizzata.

Questo codice di esempio stava lavorando benissimo con bootstrap, ma non più con la fisarmonica ui.boostrap:

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

L'obiettivo qui è quello di applicare uno stile diverso (colore di sfondo e colore del testo) sulla base di un campo oggetto . Inoltre, l'intestazione di classe fisarmonica è quella di ridimensionare la dimensione predefinita della fisarmonica.

Ecco il codice di reso:

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

e mi aspettavo qualcosa di simile:

<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);"> 

[EDIT] ho cercato di mettere la classe di fisarmonica headingLog con l'attributo ng-class, ma non funziona neanche. Solo per testare, ho provato ad applicare la classe e lo stile all'interno del corpo della fisarmonica, e funziona bene. Ho concluso che la direttiva accordionHeading non accetta alcuna classe o attributo? Come applicare dinamicamente uno stile sull'intestazione allora ???

[EDIT] Un'altra prova era di costruire il mio modello. Sono in grado di applicare la voce intestazione-fisarmonica all'intestazione, ma come posso impostare uno stile personalizzabile? Ho provato a usare ng-style e ad applicare uno stile fisso, ma non funziona. la fisarmonica di

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) 

Answer 1

Angular-UI ha una direttiva accordionHeading che consente di includere HTML.L'esempio nel codice sorgente:

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

Così forse si può fare qualcosa di simile per applicare in modo condizionale il vostro CSS personalizzato:

<accordion-group> 
<accordion-heading ng-class="{'custom-style': item.title }"> Your Title </accordion-heading> 
</accordion-group> 

Ecco il codice sorgente angolare-UI Accordion https://github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js

Answer 2

Ho avuto lo stesso problema, la soluzione rapida per me era cambiare il CSS e aggiungere una classe nel genitore "gruppo-fisarmonica":

Template:

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

È possibile creare una direttivacambiare la classe di bambini che una s bene, ma non credo che sia la soluzione migliore.