关于 angularjs：在 angular bootstrap 中设置初始静态选项卡

Setting the initial static tab in angular bootstrap

我似乎无法在angular引导选项卡集中设置初始选项卡。它总是将最左边的选项卡设置为活动状态。

给定 html:

1
2
3
4

<tabset>
<tab heading="Static 1" active="data.static1">Static content</tab>
<tab heading="Static 2" active="data.static2">Static content</tab>
</tabset>

和js：

1
2
3
4

angular.module('plunker', ['ui.bootstrap']);
var TabsDemoCtrl = function ($scope) {
$scope.data = {static1: false, static2: true}
};

见机枪

2013 年 8 月 6 日更新：现已修复上游，请参阅 github 问题。

相关讨论

您的代码可以在最新版本的 ui-bootstrap 中运行(测试版本 0.7.0 到 0.13.0 包括在内)：
http://plnkr.co/edit/SzeTqXVSd8CiKL9nkjDC?p=preview

HTML:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

<!DOCTYPE html>
<html ng-app="myApp">

<head>
<script data-require="[email protected]" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js">
<script data-require="[email protected]" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js">
<link data-require="bootstrap-css@*" data-semver="3.3.1" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" />
<script src="script.js">
</head>

<body ng-controller="ExampleController as example">
<tabset>
<tab heading="Static 1" active="data.static1">Static content1</tab>
<tab heading="Static 2" active="data.static2">Static content2</tab>
</tabset>
</body>

</html>

JavaScript:

1
2
3
4
5
6
7

angular.module("myApp", ["ui.bootstrap"])
.controller("ExampleController", function ($scope) {
$scope.data = {
static1: false,
static2: true
};
});

需要注意的一个问题是，如果将 ngController 指令放在元素上，这将不起作用。在上面的代码中，我在元素上放置了 ngController 指令。