如何在angular js中更改uib选项卡的颜色答案

【问题标题】：How to change colors of uib tab in angular js如何在angular js中更改uib选项卡的颜色
【发布时间】：2016-08-12 05:28:01
【问题描述】：

我有我的业务需求，我想更改 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 的任何其他解决方案。

注意：我不想使用 tabset

【问题讨论】：

标签： javascript jquery angularjs tabs

【解决方案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
      }
  }
}

【讨论】：

【解决方案2】：

您可以通过在tabs.push 语句中添加一个对象来非常轻松地做到这一点

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

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

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

你可以在plunker看到这个

【讨论】：