Javascript 使用ng repeat用法构建动态选项卡的选项卡集_Javascript_Angularjs_Twitter Bootstrap_Tabs

Javascript 使用ng repeat用法构建动态选项卡的选项卡集

javascript angularjs twitter-bootstrap tabs

Javascript 使用ng repeat用法构建动态选项卡的选项卡集,javascript,angularjs,twitter-bootstrap,tabs,Javascript,Angularjs,Twitter Bootstrap,Tabs,我使用angular ui选项卡（angular ui.github.io/bootstrap/），并期望通过ng repeat，我可以使其动态化，这意味着用户可以添加选项卡。但意外的是，它重复了两次这是演示选项卡可以很好地处理此问题 <tabset vertical="true" > <tab heading="{{tab.name}}"><div ng-view></div></tab> <tab h

我使用angular ui选项卡（angular ui.github.io/bootstrap/），并期望通过ng repeat，我可以使其动态化，这意味着用户可以添加选项卡。但意外的是，它重复了两次

这是演示

选项卡可以很好地处理此问题

  <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标记中，并期望以后可以将新选项卡推入其中。但是失败了，它复制了整个选项卡。

删除您的

，将ng视图放入

然后该选项卡消失。您不需要单击“添加”吗？这是该选项卡的内容。我不介意这样做。我想为它们添加选项卡功能。每个选项卡都应该有自己的选项卡内容，并且选项卡是动态的，这意味着我可以添加选项卡3、4、5等等。没有它们，您只能放置一个ng视图。

<!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>