tab-pane 间隔切换功能如何实现？

Question

如何实现jQuery solution与angular-bootstrap一起玩的功能？我想实现播放按钮并打开从所选选项卡到最后一个选项卡的选项卡轮播。

var app = angular.module('app', ['ui.bootstrap']);
app.controller('homeCtrl', function($scope) {
  $scope.tabs = [{
    id: 1,
    name: "Tab 1",
    message: "",
    active: true
  }, {
    id: 2,
    name: "Tab 2",
    message: "",
    active: false
  }, {
    id: 3,
    name: "Tab 3",
    message: "",
    active: false
  }];
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<div ng-app="app">
  <div ng-controller="homeCtrl">
    <button class="btn btn-default"><i class="glyphicon glyphicon-play"></i>
    </button>
    <tabset>
      <tab ng-repeat="tab in tabs" heading="{{tab.name}}" active="tab.active">
        {{tab}}
      </tab>
    </tabset>
  </div>
</div>

Answer 1

一个快速而肮脏的解决方案。这种情况的最佳做法是编写指令。

var app = angular.module('app', ['ui.bootstrap']);
app.controller('homeCtrl', function($scope, $interval) {
  $scope.tabs = [{
    id: 1,
    name: "Tab 1",
    message: "",
    active: true
  }, {
    id: 2,
    name: "Tab 2",
    message: "",
    active: false
  }, {
    id: 3,
    name: "Tab 3",
    message: "",
    active: false
  }];
  
  var i = 0, interval;
  
  $scope.play = function() {
    $interval.cancel(interval);
    interval = $interval(function() {
        $scope.tabs[i].active = false;
        $scope.tabs[i++].active = true;
        i = i%3;  
    }, 1000);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.12.1.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" type="text/css" />

<div ng-app="app">
  <div ng-controller="homeCtrl">
    <button ng-click="play()" class="btn btn-default"><i class="glyphicon glyphicon-play"></i>
    </button>
    <tabset>
      <tab ng-repeat="tab in tabs" heading="{{tab.name}}" active="tab.active">
        {{tab}}
      </tab>
    </tabset>
  </div>
</div>

tab-pane 间隔切换功能如何实现？

How to implement tab-pane change function in intervals?

javascript

jquery

angularjs

twitter-bootstrap-3

angular-bootstrap