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

你的笔有四个问题，我在这里已经修好了（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');
});

Answer 2

你看起来像这样吗？

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

AngularJS向boostrap选项卡列表添加新选项卡

2 个答案: