Angularjs 角度带-当ng重复指向新阵列对象时，bs选项卡未正确刷新_Angularjs_Twitter Bootstrap_Ng Repeat

Angularjs 角度带-当ng重复指向新阵列对象时，bs选项卡未正确刷新

angularjs twitter-bootstrap

Angularjs 角度带-当ng重复指向新阵列对象时，bs选项卡未正确刷新,angularjs,twitter-bootstrap,ng-repeat,Angularjs,Twitter Bootstrap,Ng Repeat,我正在尝试构建一个选项卡集，使用bs tabs ANGLARSTRAP指令和ng repeat（假设最初选项卡是a、b、c。在某些用户操作上，它应该更改为x、y、z）来动态更改用户操作我试图通过将ng repeat指向用户操作上的一个新数组对象（比如单击按钮）来实现这一点。我没有刷新选项卡集，而是注意到一种奇怪的行为我在这个plnkr中重新创建了它，请看一看 AngularStrap-Tab指令 {{tab.content} 显示不同的选项卡集查看选项卡，似乎tab指令观察活动的选项

我正在尝试构建一个选项卡集，使用bs tabs ANGLARSTRAP指令和ng repeat（假设最初选项卡是a、b、c。在某些用户操作上，它应该更改为x、y、z）来动态更改用户操作

我试图通过将ng repeat指向用户操作上的一个新数组对象（比如单击按钮）来实现这一点。我没有刷新选项卡集，而是注意到一种奇怪的行为

我在这个plnkr中重新创建了它，请看一看


AngularStrap-Tab指令
{{tab.content}
显示不同的选项卡集

查看选项卡，似乎tab指令观察活动的选项卡值，并使用转换仅刷新选项卡内容，而选项卡标题仅在最初分配。我认为唯一可以动态更改title的方法是创建一个新的指令，该指令动态地创建一个tab指令，并用新的值初始化它

<!DOCTYPE html>
<html ng-app="angularjs-starter">

  <head lang="en">
    <meta charset="utf-8">
    <title>AngularStrap - Tab directive</title>

    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap.min.css" rel="stylesheet">
    <link href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/css/bootstrap-responsive.min.css" rel="stylesheet">
    <link href="//mgcrea.github.com/angular-strap/css/prettify.css" rel="stylesheet">

    <!-- required libraries -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.1/js/bootstrap.min.js"></script>
    <script src="//mgcrea.github.com/angular-strap/js/angular-strap.js"></script>

    <!-- optional libraries -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/moment.js/2.0.0/moment.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/fastclick/0.6.0/fastclick.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/prettify/r224/prettify.js"></script>

    <link rel="stylesheet" href="style.css">
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
          <div data-fade="1" ng-model="tabs.activeTab" bs-tabs>
            <div ng-repeat="tab in tabs" data-title="{{tab.title}}"><p>{{tab.content}}</p></div>
          </div>
          <button type="button" class="btn btn-primary" ng-click="changeTabs()">Show different set of tabs</button>
  </body>

</html>