Как реализовать функцию изменения вкладки в интервалах?

Question

Как реализовать функцию jQuery solution, которая играет с угловым бутстрапом? Я хотел бы реализовать кнопку воспроизведения и включить вкладку карусели с выбранной на последнюю вкладку.

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>