Angular-UI选项卡:向特定选项卡添加类

I want to create the following tabs with Angular UI:

我想用角度UI创建以下选项卡:

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

标签http://gyazo.com/1a0153506b386d4746c108c420f7ae1b.png

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.)

(你可以看到，在添加了超脚本文本后，我需要对进行补偿)，否则就会被推下去。

Next, I have the following markup & code in html/js files:

接下来，我在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 tabs array definition above. Unfortunately, I failed to figure out how.

因此，剩下的就是根据上面的制表符数组定义在正确的元素上添加一个名为“new”的类。不幸的是，我没能弄明白是怎么回事。

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-class atrribute when viewing it in Dev Tools:

如您所见，我尝试了ng-class="{new: tab。新}(在html代码中注释)，但是这实际上破坏了所有的类特性，在开发工具中查看它时产生了错误的ng级atrribute:

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

Here's the Plunkr.

这是Plunkr。

5 个解决方案

#1

@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类都被剥离，直接添加一个类会导致不良行为，并且会阻止任何注入它的尝试。

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.

您可能想要做自己的自定义选项卡。这是一件麻烦事，但这会让你得到你想要的控制。

#2

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>

#3

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.

这个问题快把我逼疯了，下面是我为自定义标签标题样式所做的事情。角>= 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.

我们需要以元素为目标，而不是制表符标题为目标。不幸的是，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选项卡指令生成

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.

然后，所有这些都按预期工作，适当的类被添加到

，它是有趣的< >标记的父类。

,它是有趣的< >标记的父类。

To sum up: When ng-class is misbehaving and has interpolation issues, try to be more direct.

综上所述:当ng类行为不当并存在插值问题时，请尽量更直接一些。

hope that helps someone.

希望可以帮助别人。

#4

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.

我今天遇到了同样的问题，用一种稍微有点粗糙的方式解决了这个问题。每当我确定一个特定的选项卡需要从其中添加/删除一个类时，我只需使用角度选择器来选择我的选项卡，并手动添加/删除类。

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');
}

#5

-1

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;
}

#1