9

Angular UI を使用して、小さなデータベース エントリをアコーディオンでレンダリングしています。最初の試行では、ブートストラップを使用しましたが、AngularJS ビューを統合したため、アコーディオンが完全に機能しなくなりました (空の href...)。次に、ブートストラップ アコーディオンを angular UI ブートストラップ 1 とデフォルト テンプレートに置き換えました。

私の問題は、ブートストラップ バージョンで、アコーディオンのタイトルに応じて見出しをスタイル化できたことです (ng-repeat ディレクティブと見出し内の ng-style を使用していました)。Angular UI で同じことをしようとしましたが、カスタム クラスでさえレンダリングされません。

このサンプル コードは、bootstrap では問題なく機能していましたが、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-class 属性で accordion-headingLog クラスを配置しようとしましたが、どちらも機能しません。テストのために、アコーディオンのボディ内にクラスとスタイルを適用しようとしましたが、うまくいきました。accordionHeading ディレクティブはクラスまたは属性を受け入れないと結論付けますか? 見出しにスタイルを動的に適用する方法???

[編集] もう 1 つの試みは、独自のテンプレートを作成することでした。accordion-headingLog クラスを見出しに適用できますが、カスタマイズ可能なスタイルを設定するにはどうすればよいですか? ng-style を使用して固定スタイルを適用しようとしましたが、うまくいきません。

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

2 に答える 2

8

Angular-UI のアコーディオンには、HTML を含めることができる accordionHeading ディレクティブがあります。ソースコードの例:

// 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 アコーディオンのソース コードは次のとおりですhttps://github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js

于 2013-10-21T16:56:02.283 に答える
2

私は同じ問題を抱えていました.CSSを変更し、クラスを親の「accordion-group」に追加するのが私の迅速な解決策でした:

テンプレート：

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

子のクラスを変更するディレクティブを作成することもできますが、それが最善の解決策だとは思いません。

于 2015-03-18T02:33:23.170 に答える