使用 ng-repeat 构建动态选项卡的选项卡集答案

【问题标题】：tabset with ng-repeat usage to build dynamic tab使用 ng-repeat 构建动态选项卡的选项卡集
【发布时间】：2014-03-27 04:26:53
【问题描述】：

我使用 angular ui 选项卡 (angular-ui.github.io/bootstrap/) 并期望使用 ng-repeat 我可以使其动态化，这意味着用户可以添加选项卡。但出乎意料的是它重复了两次。

这里是演示 http://plnkr.co/edit/iHi1aOfbzsVd1vdX3Tg8?p=preview

标签可以正常工作

  <tabset vertical="true" >
    <tab heading="{{tab.name}}"><div ng-view></div></tab>
    <tab heading="{{tab.name}}"><div ng-view></div></tab>
  </tabset>

但我将 ng-repeat="tab in tabs" 添加到 tabset 标记，并期望稍后可以将新选项卡推入其中。但它失败了，它复制了整个标签。

【问题讨论】：

标签： javascript angularjs twitter-bootstrap tabs

【解决方案1】：

删除你的<div ng-view>，把ng-view放到<div class="mainWrap" ng-view>

http://plnkr.co/edit/TfnXp0GOzx904jMsO5RT?p=preview

<!doctype html>
<html ng-app="daysofme">
  <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.2/angular.min.js"></script>
          <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.10/angular-route.js"></script>
    <script src="ui-bootstrap.min.js"></script>
    <script src="app.js"></script>

    <link rel="stylesheet" type="text/css" href="style.css">

    <link href="bootstrap.css" type="text/css" rel="stylesheet">

  </head>
  <body ng-controller="MainControl">

<div class="mainWrap" ng-view>
  <tabset vertical="true" ng-repeat="tab in tabs">
    <tab heading="{{tab.name}}"></tab>
    <tab heading="{{tab.name}}"></tab>
  </tabset>
</div>

</body>
</html>

【讨论】：

那么标签就消失了。
不需要点击添加吗？
那是标签的内容。我没有问题。我想为他们添加标签功能。每个选项卡都应该有自己的选项卡内容，并且选项卡是动态的，这意味着我可以添加选项卡 3、4、5 等等。
没有ng-router你只能放一个ng-view。