角度js内のuibタブの色を変更する方法

Question

私は自分のビジネス要件として、uibタブの色を変更したいと考えています。私は動的なタブを持っているので、新しいタブを追加するたびにタブに独自の色を付ける必要があります。私は、タブを追加しながらランダムな色を生成するコードを持っているが、タブの色を変更する方法を知らない。

私のコードは次のようになります。それは、その後UIB]タブで、角度のjsを持つ他のソリューションができない場合

<uib-tabset active="active"> 
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" disable="tab.disabled"> 
    <uib-tab-heading> 
     <b>{{tab.title}}</b>    
    </uib-tab-heading> 
    <table class="table table-striped"> 
     <thead> 
     <tr> 
      <th>Test A</th> 
     </tr> 
     </thead> 
     <tbody > 
     <tr ng-repeat="content in contents "> 
      <td>testing value</td> 
      <td> 
     </tr> 
     </tbody> 
    </table> 
</uib-tab> 
</uib-tabset> 

タブ

$scope.addTab = function (title, view) { 
    view = view || title + " Content View"; 
    $scope.tabs.push({ title: title, content: view, disabled: false});  
}; 

を追加してください。

注：私は

Answer 1

角度UIブートストラップは、タブの順序なしリストを作成するタブセットを使用する必要はありません。各li要素はタブを表し、タブ見出しを表すアンカー要素を含んでいます。したがって、色、背景などのアンカー要素のスタイルプロパティを変更できます。動的な場合は、ng-classを使用してタブの色を変更します。例えば

： アクティブなタブの色と背景色の変更：

.nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover{ 
    color : #686868; 
    background-color : #ccc; 
} 

それがその後、好きにカスタムクラス（タブスタイル）を作成し、それを割り当てる動的な場合、次の

HTML ：

<ui-tabset class="tab-style"> 
    //template coding part 
</ui-tabset> 

SCSS：

.tab-style{ 
    .nav-tabs li a{ 
     color : //required color, 
     background-color : //required color 
    } 
    .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover{ 
     color : #686868; 
     background-color : #ccc; 
    } 
} 

各タブに別の色を追加する場合は、各タブオブジェクトsay colorの$ scope.tabsに新しいプロパティを追加し、ng-classを使用してそのプロパティをタブに追加します。

タブを追加します。

<uib-tabset active="active" class="custom-tab-style"> 
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" disable="tab.disabled" ng-class="'tab' + tab.color"> 
    <uib-tab-heading><b>{{tab.title}}</b></uib-tab-heading> 

    //template code here 
</uib-tab> 

SCSS：

をコントローラに例

$scope.addTab = function (title, view) { 
    view = view || title + " Content View"; 
    $scope.tabs.push({ title: title, content: view, disabled: false, color : 'red'}); 
}; 

を、あなたが要件

HTMLに基づくカラープロパティの値を変更

Answer 2

その後、USB-タブディレクティブにあなたがこのplunker

でこれを見ることができます ng-style

ng-style="{{tab.style}}" 

を追加するには、tabs.push声明

style:"{'background-color':'green'}" // replace "green" with your generated color 

にオブジェクトを追加することで、本当に簡単にこれを行うことができます