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/

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

1 个答案: