twitter-bootstrap Angular-UI 选项卡：将类添加到特定选项卡
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/19393559/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Angular-UI Tabs: add class to a specific tab
提问by pavek
I want to create the following tabs with Angular UI:
我想使用 Angular UI 创建以下选项卡：
(source: gyazo.com)
（来源：gyazo.com）
So, I'm adding the styles based on Bootstap's class names/markup:
所以，我根据 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;
}
(As you can see I need to compensate padding on <a>a bit after I added super-scripted text, otherwise it is pushed down.)
（如您所见，<a>在添加超级脚本文本后，我需要稍微补偿填充，否则它会被推下。）
Next, I have the following markup & code in html/jsfiles:
接下来，我在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 }
];
};
So, what's left is making Angular add a class named "new"on the correct element based on tabsarray definition above. Unfortunately, I failed to figure out how.
所以，剩下的就是让 Angular"new"根据上面的tabs数组定义添加一个以正确元素命名的类。不幸的是，我无法弄清楚如何。
As you can see I tried ng-class="{new: tab.new}"(commented in html code), but this essentially breaks all class features, producing incorrect ng-classatrribute when viewing it in Dev Tools:
如您所见，我尝试过ng-class="{new: tab.new}"（在 html 代码中进行了注释），但这基本上破坏了所有类功能，ng-class在开发工具中查看时会产生不正确的属性：
ng-class="{new: tab.new} {active: active, disabled: disabled}"
Here's the Plunkr.
这是Plunkr。
采纳答案by KayakDave
@TyndieRock is right that you can't, as far as I'm aware, apply classes to bootstrap-ui tabs. Any ng-class is stripped and directly adding a class causes bad behavior and it blocks any attempt to inject into it.
@TyndieRock 是对的，据我所知，您不能将类应用于 bootstrap-ui 选项卡。任何 ng-class 都会被剥离，直接添加一个类会导致不良行为并阻止任何注入它的尝试。
I did see an issue posted on github asking for custom css support. So maybe someday.
我确实在 github 上看到了一个问题，要求自定义 css 支持。所以也许有一天。
@TyndieRock's solution gets you closer but doesn't get you all the way. Kudos for finding tab-heading. Although his syntax is just slightly off.
@TyndieRock 的解决方案让你更接近，但并没有让你一路走好。感谢您的发现tab-heading。虽然他的语法只是稍微偏离了。
Here's what I think you'd want:
这是我认为你想要的：
<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>
This will let style the text. But it doesn't work so well for your css content.
这将使文本样式。但它对您的 css 内容效果不佳。
You might want to do your own custom tabs. It is a hassle but that'll give you the control you're looking for.
您可能想要制作自己的自定义选项卡。这是一个麻烦，但这会给你你正在寻找的控制。
回答by TyndieRock
I'm not sure that you can apply ng-class to tabs like that. After trying and failing I decided to look at the bootstrap-ui source for tabs and made an interesting discovery related to the tab heading attribute. Apparently you can put html in the heading section if you place the tab-heading as a child to a tab element.
我不确定您是否可以将 ng-class 应用于这样的选项卡。在尝试并失败后，我决定查看选项卡的 bootstrap-ui 源，并发现了与选项卡标题属性相关的有趣发现。显然，如果将选项卡标题作为选项卡元素的子项放置，则可以将 html 放在标题部分。
Check out the tabheading directive in here.
查看此处的 tabheading 指令。
This is the example they show:
这是他们展示的示例：
<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>
In your case I think you might be able to do something like this to get the same effect:
在您的情况下，我认为您可以执行以下操作以获得相同的效果：
<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>
回答by stride
This issue was driving me mad, so here is what i did to have custom tab heading styling. Works for Angular >= 1.1.5 as it is the only one to have ternary operator in expressions.
这个问题让我发疯，所以这是我为自定义标签标题样式所做的。 适用于 Angular >= 1.1.5，因为它是唯一在表达式中使用三元运算符的版本。
One needs to target the <tab>element and not tab heading. Unfortunatelly ng-class will not work and get mangled together with other ng-class directives from the templates.
一个需要定位<tab>元素而不是标签标题。不幸的是 ng-class 将无法工作并与模板中的其他 ng-class 指令一起被破坏。
If you try to target the tab heading element you will find that there is not much you can do with it. There are no parent selectors in CSS so there is no way to reach that anchor tag where most of the action is going on.
如果您尝试定位选项卡标题元素，您会发现它无能为力。CSS 中没有父选择器，因此无法到达大部分操作正在进行的锚标记。
So to have the cookie and eat it: 1) have your styles target descending anchor tag that gets generated by bootstrap tab directive
因此，要拥有 cookie 并吃掉它：1）让您的样式针对由 bootstrap tab 指令生成的降序锚标记
2) apply the class using this obscure syntax:
2) 使用这个晦涩的语法应用类：
<tabset>
<tab class="{{orderForm.detailsForm.$invalid ? 'invalid-tab' : 'valid-tab'}}">
<div>CONTENT</div>
</tab>
</tabset>
Then it all works as expected and proper classes are added to the <li>that is a parent to the interesting <a>tag.
然后一切都按预期工作，并将适当的类添加<li>到作为有趣<a>标签的父级。
To sum up: When ng-class is misbehaving and has interpolation issues, try to be more direct.
总结一下：当 ng-class 行为不端并且有插值问题时，尽量更直接。
hope that helps someone.
希望能帮助某人。
回答by Swaraj
I had the same problem today and got around it in a slightly hacky way. Whenever I determined that a specific tab needed a class added/removed from it, I simply used angular selectors to select my tab, and dynamically added/removed classes manually.
我今天遇到了同样的问题，并以一种有点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');
}
回答by Scott
Try adding an id to the DIV surrounding the tabs and then make your styles based on that. For example
尝试在选项卡周围的 DIV 中添加一个 id，然后根据它制作您的样式。例如
<div id="myTabs">
<tabset>.....</tabset>
</div>
And here is a style that makes the active tab a different color
这是一种使活动选项卡具有不同颜色的样式
#myTabs div li.active a {
background-color: lightsteelblue;
}
