10

我想使用 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。

4

5 回答 5

9

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

在这里查看 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>
于 2013-10-16T03:19:44.353 回答
6

这个问题让我发疯，所以这就是我为自定义标签标题样式所做的事情。 适用于 Angular >= 1.1.5，因为它是唯一在表达式中具有三元运算符的版本。

需要定位<tab>元素而不是标签标题。不幸的是 ng-class 将无法工作，并且会与模板中的其他 ng-class 指令混淆在一起。

如果您尝试定位选项卡标题元素，您会发现您无能为力。CSS 中没有父选择器，因此无法到达大部分操作正在进行的锚标记。

因此，要获得 cookie 并吃掉它： 1) 让您的样式以由引导选项卡指令生成的降序锚标记为目标

2）使用这种晦涩的语法应用类：

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

然后这一切都按预期工作，并将适当的类添加到<li>有趣<a>标签的父类中。

总结一下：当 ng-class 行为不端出现插值问题时，尽量直接点。

希望对某人有所帮助。

于 2014-01-13T13:40:15.147 回答
6

@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 内容。

您可能想做自己的自定义选项卡。这很麻烦，但这会给你你正在寻找的控制。

于 2013-10-16T03:59:17.250 回答
0

我今天也遇到了同样的问题，并以一种有点 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');
}
于 2013-11-27T21:30:21.387 回答
-1

尝试在选项卡周围的 DIV 中添加一个 id，然后根据它制作您的样式。例如

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

这是一种使活动选项卡具有不同颜色的样式

#myTabs div li.active a {
  background-color: lightsteelblue;
}
于 2014-06-30T20:49:02.527 回答