uib-accordion-headingのスタイルプロパティを変更する方法

Question

問題の解決方法は既にあります。しかし、リソースファイルのバージョン（内部ヘッドタグ）をui-bootstrap-tpls-2.5.0.jsからui-bootstrap-tpls-1.2.1.jsに変更すると、正常に動作していません... 。ui-bootstrap-tpls-1.2.1.jsで90％の仕事をしているので、私にはui-bootstrap-tpls-2.5.0.jsを含めることはできません（これらを変更すると、他の機能は動作していません）。

2. Plunker demo which contains ui-bootstrap-tpls-1.2.1.js

Plunker demo which contains ui-bootstrap-tpls-2.5.0.js

1.

は完全に、私は UI-ブートストラップ・TPLS-1.2を使用して__ _ UIB-アコーディオンは、見出しの色/背景色を変更する必要があります。 1.js、誰でもplsは私を助けることができます....

HTML

<div ng-controller="AccordionDemoCtrl"> 
    <script type="text/ng-template" id="group-template.html"> 
     <div class="panel-heading" style="background-color:blue;"> 
      <h4 class="panel-title" style="color:red;"> 
       <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"> 
        <span uib-accordion-header ng-class="{'text-muted': isDisabled}"> 
         {{heading}} 
        </span> 
       </a> 
      </h4> 
     </div> 
     <div class="panel-collapse collapse" uib-collapse="!isOpen"> 
      <div class="panel-body" style="text-align: right" ng-transclude></div> 
     </div> 
    </script> 
    <uib-accordion close-others="oneAtATime"> 
     <div uib-accordion-group class="panel-default" heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled"> 
      This content is straight in the template. 
     </div> 
     <div uib-accordion-group class="panel-default" heading="{{group.title}}" ng-repeat="group in groups"> 
      {{group.content}} 
     </div> 
     <div uib-accordion-group class="panel-default" heading="Dynamic Body Content"> 
      <p>The body of the uib-accordion group grows to fit the contents</p> 
      <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button> 
      <div ng-repeat="item in items">{{item}}</div> 
     </div> 
     <div uib-accordion-group class="panel-info" heading="Custom template" template-url="group-template.html"> 
      Hello 
     </div> 
     <div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html"> 
      <uib-accordion-heading> 
       Custom template with custom header template <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isCustomHeaderOpen, 'glyphicon-chevron-right': !status.isCustomHeaderOpen}"></i> 
      </uib-accordion-heading> 
      World 
     </div> 
    </uib-accordion> 
</div> 

Answer 1

HTML

<div ng-controller="AccordionDemoCtrl"> 
<script type="text/ng-template" id="group-template.html"> 
    <div class="panel-heading"> 
     <h4 class="panel-title"> 
      <a href tabindex="0" class="accordion-toggle" ng-click="toggleOpen()" uib-accordion-transclude="heading"> 
       <span uib-accordion-header ng-class="{'text-muted': isDisabled}"> 
        {{heading}} 
       </span> 
      </a> 
     </h4> 
    </div> 
    <div class="panel-collapse collapse" uib-collapse="!isOpen"> 
     <div class="panel-body" style="text-align: right" ng-transclude></div> 
    </div> 
</script> 
<uib-accordion close-others="oneAtATime"> 
    <div uib-accordion-group class="panel-default" heading="Static Header, initially expanded" is-open="status.isFirstOpen" is-disabled="status.isFirstDisabled"> 
     This content is straight in the template. 
    </div> 
    <div uib-accordion-group class="panel-default" heading="{{group.title}}" ng-repeat="group in groups"> 
     {{group.content}} 
    </div> 
    <div uib-accordion-group class="panel-default" heading="Dynamic Body Content"> 
     <p>The body of the uib-accordion group grows to fit the contents</p> 
     <button type="button" class="btn btn-default btn-sm" ng-click="addItem()">Add Item</button> 
     <div ng-repeat="item in items">{{item}}</div> 
    </div> 
    <div uib-accordion-group class="panel-info" heading="Custom template" template-url="group-template.html"> 
     Hello 
    </div> 
    <div uib-accordion-group class="panel-default" is-open="status.isCustomHeaderOpen" template-url="group-template.html"> 
     <uib-accordion-heading> 
      Custom template with custom header template <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.isCustomHeaderOpen, 'glyphicon-chevron-right': !status.isCustomHeaderOpen}"></i> 
     </uib-accordion-heading> 
     World 
    </div> 
</uib-accordion> 

CSSあなたはfoのカスタムスタイルを適用したい場合は

.panel-info .panel-heading { background: blue; color: red; }

Rのデフォルトは、その後

.panel-default .panel-heading { /* Css Properties */ }

Answer 2

javascriptファイルで生成されたスタイルをこのCSSルールで上書きして、問題を解決できます。

.panel-default > .panel-heading { 
    color: #f00 !important; 
    background-color: #00f !important; 
}