Setting the initial static tab in angular bootstrap

问题

I don't seem to be able to set the inital tab in an angular bootstrap tabset. It always sets the left most tab to active.

Given the html:

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

and js:

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

See the Plunker

Update 6 Aug 2013: Now fixed upstream see the github issue.

回答1:

It seems like (static) tabs overwrite whatever is passed to active when the directive is run. I assume it's a bug. Quick and dirty, you can use a timeout with 0 seconds delay to set the active state. At least in the plunkr, this does not cause any flicker. In your controller:

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

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

回答2:

There is an issue in all versions of angular-ui / bootstrap upto Version 0.6.0 :

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

it works in the bootstrap3 branch which you have to build yourself:

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

回答3:

I had this issue today and I found the shortest way to get around it was to set it using ng-init:

<tabset justified="true" ng-init="tabs[initialTab].isActive = true">
    <tab heading="Static 1" active="tabs.Inprogress.isActive"></tab>
    ...

回答4:

Your code works in the latest versions of ui-bootstrap (tested versions 0.7.0 through 0.13.0 inclusive):
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
    };
  });

One gotcha to be aware of is that this will not work if the ngController directive is placed on the <tabset> element. In the code above, I have placed the ngController directive on the <body> element.

来源：https://stackoverflow.com/questions/17695629/setting-the-initial-static-tab-in-angular-bootstrap

标签

angularjs

angular-ui-bootstrap