9

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

给定html：

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

和js：

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

见Plunker

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

4

4 回答 4

13

运行指令时，（静态）选项卡似乎会覆盖传递给活动的任何内容。我认为这是一个错误。快速而肮脏，您可以使用 0 秒延迟的超时来设置活动状态。至少在 plunkr 中，这不会导致任何闪烁。在您的控制器中：

$scope.data = {};
$timeout(function() {
  $scope.data.static2 = true;  
}, 0)

http://plnkr.co/edit/3KbdKh?p=preview

于 2013-07-17T09:24:33.517 回答
3

angular-ui / bootstrap 到版本 0.6.0 的所有版本都存在问题：

http://plnkr.co/edit/73lm068buZf851h47FVQ?p=preview

它适用于bootstrap3您必须自己构建的分支：

http://plnkr.co/edit/uOASvZ71DzgZqODmHQP8?p=preview

于 2013-11-14T16:01:21.773 回答
3

我今天遇到了这个问题，我发现解决它的最短方法是使用 ng-init 设置它：

<tabset justified="true" ng-init="tabs[initialTab].isActive = true">
    <tab heading="Static 1" active="tabs.Inprogress.isActive"></tab>
    ...
于 2014-11-27T10:54:54.340 回答
1

您的代码适用于最新版本的 ui-bootstrap（测试版本 0.7.0 到 0.13.0 包括在内）：
http ://plnkr.co/edit/SzeTqXVSd8CiKL9nkjDC?p=preview

HTML：

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

  <head>
    <script data-require="angular.js@1.x" data-semver="1.4.0" src="https://code.angularjs.org/1.4.0/angular.js"></script>
    <script data-require="ui-bootstrap@0.13.0" data-semver="0.13.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.13.0.min.js"></script>
    <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"></script>
  </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：

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

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

于 2015-06-07T14:38:34.087 回答