AngularJSブーストラブタブリストに新しいタブを追加

Question

私は、アプリケーションにタブのナビゲーションバーを実装しようとしています。私はBootstrap3を使用して、この例のBoostrap Tabs and Pillsに従います。

私は毎回提示される1つのタブ（#home）を持っています。私がaddInput（）関数をクリックすると生成したい他のタブ。すなわち、tab1、tab2、tab3。

togtherの組み合わせを取得する方法は正確にわかりません。どのようにnavbarのためにhref="#menu1"とリストの要素を作成することができますが、タブ内のコンテンツのためのフィッティングid = "menu1"。ここで

は私の例CodePen.io

<div ng-app="myApp" ng-controller="myCtrl"> 
<form> 
<div class="form-group"> 
    <label for="txtDevice" class="control-label">Form Field 1</label> 
    <input type="text" class="form-control" ng-model="info.name" id="txtDevice"> 
</div> 
<div class="form-group"> 
    <label for="txtIP" class="control-label">Form Field 2</label> 
    <input type="text" class="form-control" ng-model="info.ip" id="txtIP"> 
</div> 


<ul class="nav nav-tabs"> 
    <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
</ul> 


<div class="form-group tab-content"> 
    <div id="home" class="tab-pane fade in active"> 
    <h4>Home</h4> 
    <p>content</p> 
    </div> 
    <div ng-repeat="site in info.sites track by $index"> 
    <h4>tab {{$index +1}}</h4> 
    <p>content</p> 
    </div> 
</div> 


</form> 
    <button ng-click="addInput()">+add more inputs</button> 
{{info | json}} 
    <hr> 


    tags = {{tags | json}} 

</div> 

Answer 1

私はここに固定されていることを、あなたのペンと間違っ約4のもの、（http://codepen.io/anon/pen/eBRwev?editors=1010）

1. はあなたのタブナビゲーションタブ見出しのng-repeat

   <ul id="myTabs" class="nav nav-tabs"> 
       <li class="active"><a data-toggle="tab" href="#home">Home</a></li> 
       <li ng-repeat="site in info.sites track by $index" class="tab-pane fade in"> 
        <a data-toggle="tab" href="#tab-{{$index}}" >Tab #{{$index}}</a> 
       </li> 
   </ul> 
   

が含まれていませんでしたありました

2. ブートストラップタブを使用するために必要なjQueryとBootstrap JSライブラリを含めるのを忘れてしまった。あなたは、タブ上

   $('#myTabs a').click(function (e) { 
       e.preventDefault(); 
       $(this).tab('show'); 
   }); 
   

Answer 2

あなたはこのような何かを探しているのですか？

id="{{ 'menu' + $index }}"