如何在Angular JS中更改UIB選項卡的顏色

Question

我有我要更改uib標簽顏色的業務要求。 我有動態標簽，因此每當我添加新標簽時，我都希望標簽具有自己的顏色。 我有在添加標簽時生成隨機顏色的代碼，但不知道如何更改標簽的顏色。

我的代碼是：

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

如果無法使用uib選項卡，則請使用angular js使用其他解決方案。

注意：我不想使用標簽集

Answer 1

Angular UI Bootstrap為選項卡創建無序列表。 每個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;
   }
}

如果要為每個選項卡添加單獨的顏色，則為每個選項卡對象向$ scope.tabs添加新屬性，說出顏色，然后使用ng-class將屬性添加至選項卡。

添加標簽：示例

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

在控制器中，您可以根據需要更改顏色屬性值

HTML：

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

custom-tab-style{
  .tab-red{
     a{
        color : red;
        //Here you can modify css styles for tab link
      }
  }
}

Answer 2

通過將一個對象添加到tabs.push語句中，您可以非常輕松地完成此操作

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

然后在usb-tabs指令中添加ng-style

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

你可以在這個矮人里看到