AngularJs - 动态标签 - 应该自行调整

Question

HTML代码如下

<div>
    <ul data-ng-repeat ="tab in tabs">
          <li data-ng-class="{active: tab.selected == 'true'}"  message-key="Tab">
          </li>      
     </ul>
</div>

屏幕如下所示：

屏幕的一部分有一个带有选项卡的面板 - 选项卡可以在 1 到 10 个之间。要求是如果选项卡不适合该空间，则应动态减小它们的大小以适应它们。不允许使用滚动条。我们使用 Angularjs 和引导程序。有什么想法吗？

根据建议进行更改。 屏幕是这样的（标签在屏幕外，字体大小不变）

HTML 代码

    <div  class="divtab" >
        <ul class="nav nav-tabs" data-ng-repeat ="tab in tabs">                                                                                
          <li data-ng-class="{active: tab.selected == 'true'}" message-key="Tab">  </li>      
         </ul>
</div>

Css 类

.divtab {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -webkit-align-items: center;
   -ms-flex-align: center;
   -ms-grid-row-align: center;
   align-items: center;
   height: 36px;
   margin-bottom: 15px;
   padding: 0;
}
.divtab > ul {
   list-style: none;
   padding: 0;
   margin: 0;
   height: 44px;
}
.divtab > ul > .active {
   background: #0e847d;
   color: #fff;
   border-radius: 2px 2px 0 0;
}
.divtab > ul > li {
  padding: 0 20px;
  height: 100%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
}

Answer 1

 <ul class="nav nav-tabs" data-ng-repeat ="tab in tabs">
  <li  data-ng-class="{active: tab.selected == 'true'}" message-key="Tab"></li>
</ul>

使用上面的代码sn-p。使用 bootstrap nav 和 nav-tabs 类

Answer 2

这里是例子

JS

$scope.tabs = [
    {id: 1, name: 'tab1', selected: true},
    {id: 2, name: 'tab2', selected: false}    
   ];

HTML

 <ul class="nav nav-tabs" data-ng-repeat ="tab in tabs">
  <li  data-ng-class="{'active': tab.selected}"><a data-toggle="tab">{{tab.name}}</a></li>
</ul>