如何在Angular UI中設置手風琴類的類別/風格

我正在使用Angular UI在手風琴中呈現littel數據庫條目。在第一個試驗中，我使用了bootstrap，但是當我集成了AngularJS視圖時，手風琴沒有更完整的工作（空href ...）。然後，我用角度UI引導程序和默認模板替換了自舉手風琴。如何在Angular UI中設置手風琴類的類別/風格

我的問題是，在引導版本中，我設法根據手風琴標題（我正在使用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}})

這裏的目標是應用基礎上的項目欄不同的風格（背景顏色和文本顏色）。此外，類手風琴 - 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);">

[編輯] 我試圖把手風琴headingLog類NG-class屬性，但它也不起作用。爲了測試，我試圖將手風琴內部的課程和風格應用到手風琴內部，並且效果很好。我conclue，accordionHeading指令不接受任何類或屬性？如何在標題上動態應用樣式然後？

[編輯] 另一個試驗是建立自己的模板。我可以將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)

來源

2013-10-20 GuillaumeA

你是什麼意思呈現的代碼？ Bootstrap相當於？你有沒有機會使用bootstrap3？ – TyndieRock

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>

這裏是角UI手風琴源代碼https://github.com/angular-ui/bootstrap/blob/master/src/accordion/accordion.js

來源

2013-10-21 16:56:02 TyndieRock

其實我已經使用了accordionHeading指令。檢查我提供的第一個代碼塊的第二行。但也許我可以嘗試使用ngClass屬性而不是ngStyle。 – GuillaumeA

哦，對不起，我現在看到這是用Jade寫的。 ng樣式是否與class =「accordion-headingLog」相沖突？我想我有點不確定確切的問題是什麼。 – TyndieRock

沒問題。我想我會嘗試爲我的accordion-headingLog類使用ngClass。 – GuillaumeA

我遇到了同樣的問題，對我而言，快速解決方案是更改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-18 02:33:23 nipo

如何在Angular UI中設置手風琴類的類別/風格

回答

相關問題