Question

我使用angular ui tab（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 =＆＃34;标签＆＃34;到tabset标签并期待以后可以将新标签推入其中。但它失败了，它复制了整个标签。

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

使用ng-repeat用法的tabset来构建动态选项卡

1 个答案: