Bootstrap UI：随时间自动移动标签答案

【问题标题】：Bootstrap UI : Auto Tab Move with TimeBootstrap UI：随时间自动移动标签
【发布时间】：2014-04-28 06:11:02
【问题描述】：

我有一个 AnguleJS Bootstrp UI Horizontal Tab 结构。

单击选项卡 2 后，将显示选项卡 2 的内容，与选项卡 3 相同。

我的问题是：

我想以一种在 3000 毫秒后自动显示选项卡 2 并在该选项卡 3 之后不单击选项卡的方式实现。并且一旦我单击任何特定的选项卡，它就会停止并显示该选项卡的内容。

这是水平选项卡视图的演示 (Onclick)：Plunker Demo

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.8/angular.js"></script>
    <script src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>

<div ng-controller="TabsDemoCtrl">

  <tabset>

    <tab ng-repeat="tab in tabs" heading="{{tab.title}}">
      {{tab.content}}
    </tab>

  </tabset>


</div>
  </body>
</html>

【问题讨论】：

标签： angularjs twitter-bootstrap user-interface tabs

【解决方案1】：

所以有一个名为active 的指令变量，您可以在其中传递一个变量，指示选项卡是否应该处于活动状态。

将这些变量放入一个数组中，设置一个间隔并使用索引来设置正确的选项卡处于活动状态。

我的工作人员：PlunkerDemo 也许使用角度的$interval。

【讨论】：

+1 为答案！但是是否可以在不单击“开始”按钮的情况下自动调用该函数，因为我不想在单击时执行 Tab 更改？停止对我来说没问题。
当然，只需调用控制器末尾的方法即可。现在检查 plunker ;)