Question

我想用Angular UI创建以下标签：

tabs http://gyazo.com/1a0153506b386d4746c108c420f7ae1b.png

所以，我正在添加基于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>上补偿填充，否则会被推下来。）

接下来，我有以下标记＆amp; 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>

Answer 2

@TyndieRock是对的，据我所知，你不能将类应用于bootstrap-ui标签。任何ng-class都被剥离，直接添加一个类会导致不良行为，并阻止任何注入它的尝试。

我确实在github上发布了一个问题，要求提供自定义css支持。所以也许有一天。

@ TyndieRock的解决方案让你更接近，但不会让你一路走来。感谢找到tab-heading。虽然他的语法略有偏差。

这是我认为你想要的：

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

这会让文字风格化。但它对你的css内容效果不佳。

您可能想要自己创建自定义标签。这是一个麻烦，但它会给你你正在寻找的控制。

Answer 3

这个问题让我很生气，所以这就是我所做的自定义标签标题样式。 适用于Angular＆gt; = 1.1.5，因为它是唯一一个在表达式中使用三元运算符的人。

需要定位<tab>元素而不是标签标题。不幸的是，ng-class不会与模板中的其他ng-class指令一起被破坏。

如果您尝试定位标签标题元素，您会发现没有太多可以使用它。 CSS中没有父选择器，因此无法访问大多数操作正在进行的锚标记。

所以要获得cookie并吃掉它： 1）让你的样式成为由bootstrap tab指令生成的降序锚标记

2）使用这种模糊语法来应用该类：

 <tabset>
        <tab class="{{orderForm.detailsForm.$invalid ? 'invalid-tab' : 'valid-tab'}}">
            <div>CONTENT</div>
</tab>
</tabset>

然后一切按预期工作，并将适当的类添加到<li>，该<a>是有趣的{{1}}标记的父级。

总结：当ng-class行为不端并且存在插值问题时，请尝试更直接。

希望能有所帮助。

Answer 4

我今天遇到了同样的问题，并以一种轻微的hacky方式绕过它。每当我确定特定选项卡需要添加/删除它时，我只需使用角度选择器来选择我的选项卡，并手动添加/删除类。

HTML
<tab class="errorTab" heading='error' active='explorer.hasError'>
  <div error-message class='errorTabSectionOuter'></div>
</tab>

JS
var errorTab = angular.element('.errorTab');
if($scope.explorer.hasError){
  errorTab.addClass('showErrorTabClass');
  errorTab.removeClass('hideErrorTabClass');
}
else{
  errorTab.addClass('hideErrorTabClass');
  errorTab.removeClass('showErrorTabClass');
}

Answer 5

尝试将ID添加到标签周围的DIV，然后根据它创建样式。例如

<div id="myTabs">
 <tabset>.....</tabset>
</div>

这是一种使活动标签颜色不同的样式

#myTabs div li.active a {
  background-color: lightsteelblue;
}

Angular-UI选项卡：将类添加到特定选项卡

5 个答案: