twitter-bootstrap - Twitter Bootstrap と Angular.js - ドロップダウン タブに追加

Question

angular.jsとbootstarpのタブにドロップダウンを追加する方法は私のコードです

 <tabset class="nav nav-tabs centered-tab sub-nav">
    <tab heading="Bio"  class="dropdown-toggle" >
     <ul class="dropdown-menu">
      <li ng-repeat="choice in items">
        <a>{{choice}}</a>
      </li>
     </ul>
    </tab>
 </tabset>

コントローラ内

$scope.items = [
    "The first choice!",
    "And another choice for you.",
    "but wait! A third!"
  ];

「バイオ」タブをクリックしても機能しません

Answer 1

私は最近、自分自身でこれに苦労しましたが、他の人が解決策を見つけ出す手間を省くために、この例を投稿しています (Jade ジェネレーターを使用)。

要件

• Angular Bootstrap のセットアップ

HTML

div(ng-app="ui.bootstrap.demo")
 tabset(type="pills")
    tab
      tab-heading
         span.dropdown(on-toggle="toggled(open)" dropdown)
            a(href dropdown-toggle).dropdown-toggle 
              span Click me for a dropdown
            ul.dropdown-menu
               li
                  a(href) action

JavaScript

angular.module('ui.bootstrap.demo', ['ui.bootstrap']);

---

結果：