Ich verwende Angular UI, um kleine Datenbankeinträge in einem Akkordeon zu rendern. In einem ersten Versuch habe ich Bootstrap verwendet, aber als ich AngularJS-Ansichten integriert habe, funktioniert Akkordeon nicht mehr (leere href ...). Ich ersetzte dann mein Bootstrap Akkordeon durch eckiges UI Bootstrap eins und die Standardvorlage.
Mein Problem ist, dass es mir in der Bootstrap-Version gelungen ist, die Überschrift abhängig vom Akkordeon-Titel zu stilisieren (ich benutzte die ng-repeat-Direktive und den ng-Stil innerhalb der Überschrift). Ich habe versucht, das gleiche mit Angular UI zu tun, aber selbst meine benutzerdefinierte Klasse wird nicht gerendert.
Dieser Beispielcode funktionierte großartig mit Bootstrap, aber nicht mehr mit ui.boostrap Akkordeon:
%Vor%Ziel ist es, einen anderen Stil (Hintergrundfarbe und Textfarbe) basierend auf einem Elementfeld anzuwenden. Desweiteren soll die Akkordeon-Standardgröße in der Klasse accordion-headingLog geändert werden.
Hier ist der gerenderte Code:
%Vor%Und ich habe etwas erwartet wie:
%Vor%[BEARBEITEN] Ich habe versucht, die accordion-headingLog-Klasse mit dem ng-class-Attribut zu versehen, aber es funktioniert auch nicht. Nur um zu testen, habe ich versucht, die Klasse und den Stil im Körper des Akkordeons anzuwenden, und es funktioniert gut. Ich nehme an, dass die AccordionHeading-Direktive keine Klasse oder Attribut akzeptiert? Wie man einen Stil auf die Überschrift dann dynamisch anwendet ???
[BEARBEITEN] Ein weiterer Versuch war, meine eigene Vorlage zu erstellen. Ich kann die Accordion-headingLog-Klasse auf die Überschrift anwenden, aber wie kann ich einen anpassbaren Stil festlegen? Ich habe versucht, ng-style zu verwenden und einen festen Stil anzuwenden, aber es funktioniert nicht.
%Vor%Das Akkordeon von Angular-UI verfügt über eine AccordionHeading-Direktive, mit der Sie HTML einfügen können. Das Beispiel im Quelltext:
%Vor%Vielleicht können Sie so etwas tun, um Ihre benutzerdefinierte CSS-Datei bedingt anzuwenden:
%Vor%Hier ist der Quellcode des Angular-UI Akkordeons Ссылка
Ich hatte das gleiche Problem, die schnelle Lösung für mich war, das CSS zu ändern und eine Klasse in die übergeordnete "Akkordeon-Gruppe" einzufügen:
Vorlage:
%Vor%HTML:
%Vor%CSS:
%Vor%Sie können eine Anweisung erstellen, um auch die Klasse der Kinder zu ändern, aber ich glaube nicht, dass dies die beste Lösung ist.
Tags und Links angularjs angular-ui