AngularJS 将新标签添加到引导标签列表

Question

我尝试在我的应用程序中实现标签导航栏。我使用 Bootstrap3 并遵循此示例 Boostrap Tabs and Pills.

我有一个选项卡 (#home) 每次都会显示。单击 addInput() 函数时我想生成的其他选项卡。即 tab1、tab2、tab3。

我不知道如何将组合组合在一起。我如何为导航栏创建一个列表元素 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

您正在寻找这样的东西？

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

Answer 2

你的笔大约有四个问题，我已经在这里修复了 (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>

您忘记包含使用 bootstrap 选项卡所需的 jQuery 和 Bootstrap JS 库。
您必须调用以下 JS 代码片段才能激活 bootstrap 选项卡上的点击处理
```
$('#myTabs a').click(function (e) {
  e.preventDefault();
  $(this).tab('show');
});
```

AngularJS 将新标签添加到引导标签列表

AngularJS add new tabs to boostrap tab list

tabs

navbar

angularjs

twitter-bootstrap-3