AngularJS添加新選項卡以推動選項卡列表

我嘗試在我的應用程序中實現選項卡導航欄。我使用Bootstrap3並按照此示例Boostrap Tabs and Pills。AngularJS添加新選項卡以推動選項卡列表

我有一個標籤（#home），每次出現。當我點擊addInput（）函數時，我想要生成的其他選項卡。 I.e tab1，tab2，tab3。

我不知道如何得到組合togther。我如何創建一個列表元素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>

來源

2016-11-25 mvmthecreator

有錯你的筆約四件事情，我已經在這裏固定的（http://codepen.io/anon/pen/eBRwev?editors=1010）

你的標籤導航不包括標籤標題的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>

您忘記了包含使用引導選項卡所需的jQuery和Bootstrap JS庫。

你必須調用JS的下面的代碼片段，以激活引導點擊操控性上的標籤

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

來源

2016-11-25 16:51:11 2ps

謝謝你的修復。我diddnt知道，我可以在同一範圍內定義ng-repeat 2次。 – mvmthecreator

您正在尋找這樣的事情？

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

來源

2016-11-25 16:24:05

AngularJS添加新選項卡以推動選項卡列表

回答

相關問題