AngularJS 将选项卡动态添加到垂直选项卡表答案

【问题标题】：AngularJS Dynamically adding tabs to a vertical tab tableAngularJS 将选项卡动态添加到垂直选项卡表
【发布时间】：2015-09-02 17:59:50
【问题描述】：

我目前正在尝试在 AngularJS 中制作一个动态垂直标签表。换句话说，我希望用户在按下按钮时添加自己的选项卡。我知道如果选项卡在表格上方是水平的，但如果选项卡在表格的右侧垂直，我必须将它们放在不同的 div 中。我很难将标签中的数据与表格内容相关联。

  <div class="col-sm-9">
    <div class="tab-content">
      <div ng-show="view_tab == 'tab1'">
        Campaign Name:
        <input ng-model="tab1name">
        <br>Campaign Info:
        <br>This is tab 1 content

      </div>
      <div ng-show="view_tab == 'tab2'">
        Campaign Name:
        <input ng-model="tab2name">
        <br>Campaign Info:
        <br>This is tab 2 content
      </div>
    </div>
  </div>
  <div class="col-sm-3">
    <ul class="nav nav-tabs nav-stacked nav-pills" role="tablist" ng-init="view_tab = 'tab1'">
      <li ng-class="{'active': view_tab == 'tab1'}">
        <a class="btn-lg" ng-click="changeTab('tab1')" href=""> Campaign: {{tab1name}}</a>
      </li>
      <li ng-class="{'active': view_tab == 'tab2'}">
        <a class="btn-lg" ng-click="changeTab('tab2')" href=""> Campaign: {{tab2name}}</a>
      </li>
      <li ng-class="{'active': view_tab == 'tab3'}">
        <a class="btn-lg" ng-click="changeTab('tab2')" href="">Add a Tab</a>
      </li>
    </ul>
  </div>

我知道我需要使用 ng-repeat 和某种模板来推送到包含所有表数据的对象上。但我不清楚如何实际实现这一点。我已经包含了我目前正在使用的垂直选项卡表的 JSFiddle。任何帮助将不胜感激。

http://jsfiddle.net/eRGT8/1032/

【问题讨论】：

标签： javascript html css angularjs

【解决方案1】：

是的，您需要创建一个包含所有选项卡的数组并使用ng-repeat

这是模板

<ul class="nav nav-tabs nav-stacked nav-pills" role="tablist" ng-init="view_tab = 'tab1'">
<li ng-class="{'active': view_tab == $index}" ng-repeat="tab in tabs"> 
    <a class="btn-lg" ng-click="changeTab($index)" href=""> Campaign: {{tab.name}}</a>
 </li>

这是数组：

$scope.tabs = [{
   name: ''
 }, {
    name: ''
}]

这是 jsfiddle 中的完整代码 http://jsfiddle.net/jekvu1br/

【讨论】：