AngularJS將標簽動態添加到垂直標簽表

Question

我目前正在嘗試在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/

Answer 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/