twitter-bootstrap - Angular-UI 选项卡 : add class to a specific tab

Question

我想使用 Angular UI 创建以下选项卡:


(来源:gyazo.com)

所以，我添加了基于 Bootstap 的类名/标记的样式:

.nav-tabs > li.new > a {
  padding-top: 5px;
}
.nav-tabs > .new > a:after {
  content: "NEW";
  color: indianred;
  font-size: 10px;
  vertical-align: super;
  padding-left: 2px;
}

(如您所见，我需要在添加上标文本后稍微补偿 <a> 上的填充，否则它会被向下推。)

接下来，我在 html/js 中有以下标记和代码文件:

HTML:
<tabset>
    <tab ng-repeat="tab in tabs" heading="{{ tab.title }}" active="tab.active" ><!-- ng-class="{new: tab.new}"-->
        <div ng-include="tab.page"></div>
    </tab>
</tabset>

JS:
var TabsDemoCtrl = function ($scope) {
  $scope.tabs = [
    { title:"Tab 1", content:"Dynamic content 1" },
    { title:"Tab 2", content:"Dynamic content 2", active: true, 'new': true }
  ];

};

所以，剩下的就是让 Angular 添加一个名为 "new" 的类。基于 tabs 的正确元素上面的数组定义。不幸的是，我无法弄清楚如何。

如您所见，我尝试了 ng-class="{new: tab.new}" (在 html 代码中注释)，但这基本上破坏了所有类功能，产生不正确的 ng-class在开发工具中查看它时的属性:

ng-class="{new: tab.new} {active: active, disabled: disabled}"

这是 Plunkr .

Answer 1

我不确定您是否可以将 ng-class 应用于这样的选项卡。在尝试并失败后，我决定查看选项卡的 bootstrap-ui 源代码，并发现了一个与选项卡标题属性相关的有趣发现。显然，如果将选项卡标题作为子元素放置在选项卡元素中，则可以将 html 放在标题部分。

查看 here 中的 tabheading 指令.

这是他们展示的例子:

<tabset>
  <tab>
    <tab-heading><b>HTML</b> in my titles?!</tab-heading>
    And some content, too!
  </tab>
  <tab>
    <tab-heading><i class="icon-heart"></i> Icon heading?!?</tab-heading>
    That's right.
  </tab>
</tabset>

在你的情况下，我认为你可以做这样的事情来获得同样的效果:

<tab ng-repeat="tab in tabs" active="tab.active">
    <tab-heading>{{tab.title}} <span ng-show="tab.new">new</span></tab-heading>
    <div ng-include="tab.page"></div>
</tab>