如何使用Angular和Bootstrap中的「全部」選項卡製作標籤導航？

Question

我使用的引導和角度，我有以下的HTML：

<ul class="nav nav-tabs"> 
    <li class="active"><a data-target="#" data-toggle="tab">All</a></li> 
    <li><a data-target="#tab1" data-toggle="tab">Tab 1</a></li> 
    <li><a data-target="#tab2" data-toggle="tab">Tab 2</a></li> 
</ul> 
<div class="tab-content"> 
    <div id="tab1" class="tab-pane active">Yeahhh, this is Tab 1.</div> 
    <div id="tab2" class="tab-pane active">Yup, yup, this is Tab 2.</div> 
</div> 

我想既形象化＃TAB1單擊「全部」選項卡時和＃TAB2。我如何通過Bootstrap和Angular實現這一目標？

Answer 1

我在這個answer找到了解決方案。

<ul class="nav nav-tabs"> 
    <li class="active"><a data-target=".tab-pane" data-toggle="tab">All</a></li> 
    <li><a data-target="#tab1" data-toggle="tab">Tab 1</a></li> 
    <li><a data-target="#tab2" data-toggle="tab">Tab 2</a></li> 
</ul> 
<div class="tab-content"> 
    <div id="tab1" class="tab-pane active">Yeahhh, this is Tab 1.</div> 
    <div id="tab2" class="tab-pane active">Yup, yup, this is Tab 2.</div> 
</div> 

我只是將「全部」選項卡的數據目標設置爲CSS類，它出現在我的所有選項卡中。它不必完全是'tab-pane'，你可以使用自己的類 - 'foo'或'bar'。這是一個不錯的簡單解決方案，因爲不需要外部庫來實現這一點。