如何实现与angular-bootstrap一起玩的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>
&#13;
答案 0 :(得分: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);
}
});
&#13;
<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>
&#13;