角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>補償填充。）

接下來，我在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 } 
    ]; 

};

那麼，剩下的就是做角添加一個基於上面tabs數組定義正確的元素命名"new"類。不幸的是，我沒有弄清楚如何。

正如你可以看到我試着ng-class="{new: tab.new}"（HTML代碼中註釋），但是這基本上打破了所有類的功能，在開發工具觀看它時，不正確產生ng-class atrribute：

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

這裏的Plunkr。

來源

2013-10-16 pavek

@TyndieRock是正確的，就我所知，您不能將類應用於bootstrap-ui選項卡。任何ng類都被剝離，直接添加一個類會導致不良行爲，並阻止任何嘗試注入它。

我看到一個問題發佈在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-16 03:59:17 KayakDave

可以設置li和生成的標籤，但不能使用ng-class。查看我的解決方案http://stackoverflow.com/a/21092713/968833 – stride

@stride這是一個很好的觀點，新的三元運算符工作 - 注意三元運算符已添加到Angular 1.1.5。這個問題是在1.0.8之前寫的，所以這不是一個選項。 – KayakDave

好點。將該信息添加到解決方案中。 – stride

我不確定你可以將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>

來源

2013-10-16 03:19:44 TyndieRock

感謝您指出了正確的方向。但KayakDave的回答真的完成了這項工作。 – pavek

我今天遇到了同樣的問題，並以稍微黑客的方式繞過它。每當我確定一個特定的選項卡需要添加/刪除一個類時，我只是使用角選擇器來選擇我的選項卡，並手動添加/刪除類。

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-27 21:30:21 Swaraj

這是一個指令，不是把它放在控制器裏面，因爲你在做DOM選擇，它不應該是你的視圖控制器的一部分。 – Sebastian

這個問題讓我很生氣，所以這裏是我做了自定義標籤標題樣式。 Works for Angular> = 1.1.5，因爲它是表達式中唯一具有三元運算符的元素。

需要定位<tab>元素而不是標籤標題。不幸的是，ng-class不會工作，並且會與模板中的其他ng-class指令一起發生重疊。

如果您嘗試定位標籤標題元素，則會發現無法使用它。 CSS中沒有父級選擇器，因此無法在大部分操作正在進行時到達該錨點標記。

所以有餅乾和熊掌兼得： 1）有你的風格定位降即得到由引導標籤指令

2）產生的錨標記使用這個晦澀的語法應用類：

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

然後它按預期工作，並將適當的類添加到<li>，這是有趣的<a>標記的父級。

總結：當ng-class行爲不正確並且存在插值問題時，應該儘可能地更直接。

希望能幫助別人。

來源

2014-01-13 13:40:15 stride

這是行得通的，但我認爲ng-class應該由tabs：-D支持。 – Sebastian

如果我們只有無效標籤類，該怎麼辦？我們可以使用''作爲第二種情況嗎？ – Naomi

你有有效的選項卡？ – Naomi

-1

嘗試向標籤周圍的DIV添加一個ID，然後根據該標籤製作樣式。例如

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

這裏是一個風格，使活動標籤以不同的顏色

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

來源

2014-06-30 20:49:02 Scott

這不符合問題，因爲如果類匹配，他希望將類應用於選項卡標題以顯示New。你只是使用現有的類來激活標籤，但這不是問題的答案。 – Sebastian

角UI選項卡：添加類到一個特定的標籤

回答

相關問題