Как установить класс/стиль заголовка аккордеона в Angular UI

Я использую Angular UI для отображения небольших записей базы данных в аккордеоне. В первом испытании я использовал начальную загрузку, но когда я интегрировал представления AngularJS, аккордеон больше не работает полностью (пустой href...). Затем я заменил свой загрузочный аккордеон угловым загрузочным интерфейсом и шаблоном по умолчанию.

Моя проблема в том, что в загрузочной версии мне удалось стилизовать заголовок в зависимости от названия аккордеона (я использовал директиву ng-repeat и стиль ng внутри заголовка). Я пытался сделать то же самое с Angular UI, но даже мой пользовательский класс не отображается.

Этот пример кода отлично работал с бутстрапом, но не с аккордеоном 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}})

Цель здесь — применить другой стиль (цвет фона и цвет текста) в зависимости от поля элемента. Кроме того, классaccordion-headingLog предназначен для изменения размера аккордеона по умолчанию.

Вот отрендеренный код:

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

А я ожидал что-то вроде:

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

[РЕДАКТИРОВАТЬ] Я пытался поместить класс аккордеона-заголовка с атрибутом ng-класса, но он тоже не работает. Просто для проверки я попытался применить класс и стиль внутри корпуса аккордеона, и он работает хорошо. Я заключаю, что директива аккордеонхеадинг не принимает никаких классов или атрибутов? Как тогда динамически применить стиль к заголовку???

[EDIT] Еще одним испытанием было создание моего собственного шаблона. Я могу применить к заголовку класс «accordion-headingLog», но как установить настраиваемый стиль? Я пытался использовать ng-стиль и применить фиксированный стиль, но это не сработало.

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)

angularjs angular-ui
person GuillaumeA    schedule 20.10.2013    source источник
comment
Что вы имеете в виду отрендеренный код? Эквивалент бутстрапа? Вы случайно не используете bootstrap3?   -  person TyndieRock    schedule 21.10.2013

Ответы (2)


arrow_upward
8
arrow_downward

Аккордеон Angular-UI имеет директиву AccordionHeading, которая позволяет вам включать HTML. Пример в исходном коде:

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

Так что, возможно, вы можете сделать что-то вроде этого, чтобы условно применить свой собственный CSS:

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

Вот исходный код Angular-UI Accordion https://github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js

person TyndieRock    schedule 21.10.2013
comment
На самом деле я уже использую директиву аккордеона. Проверьте вторую строку первого блока кода, который я предоставил. Но, может быть, я мог бы попробовать использовать атрибут ngClass вместо атрибута ngStyle. - person GuillaumeA; 21.10.2013
comment
О, извините, я вижу, что теперь это написано на нефрите. Не конфликтует ли стиль ng с class=accordion-headingLog? Я думаю, я немного не уверен, в чем именно проблема. - person TyndieRock; 21.10.2013
comment
Без проблем. Я думаю, что попробую использовать ngClass для моего класса аккордеон-заголовок. - person GuillaumeA; 21.10.2013
comment
Я часто обращаюсь к этому вопросу при работе с условным стилем в Angular stackoverflow.com/questions/13813254/ - person TyndieRock; 21.10.2013

arrow_upward
2
arrow_downward

У меня была та же проблема, быстрым решением для меня было изменить CSS и добавить класс в родительскую «аккордеонную группу»:

Шаблон:

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

Вы также можете создать директиву для изменения класса дочерних элементов, но я не считаю, что это лучшее решение.

person nipo    schedule 18.03.2015