我目前正在尝试在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。任何帮助将不胜感激。
是的，您需要创建所有选项卡的数组并使用 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/
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句