Как сделать навигацию по вкладкам с помощью вкладки "Все" в Angular и Bootstrap?

Question

Я использую Bootstrap и Angular, и у меня есть следующий 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

Я нашел решение в этом ответе.

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

Я просто установил для data-target вкладки "All" класс CSS, который присутствует во всех моих вкладках. Это не обязательно должен быть "tab-pane", вы можете использовать свой собственный класс - "foo" или "bar". Это хорошее и простое решение, так как для этого не требуется никаких внешних библиотек.