CODEWITHSUNDEEP
angularjstabsangular-strap
Pompey
Pompey

Reputation: 606

Angular strap tabs doesn't open any tab on data reload

I'm playing around with angular strap tabs and got into an issue where if I reload the data that the tabs are based on then none of the tabs are actually open. It just shows the top headers, but no data for any of them. If you click a tab it works fine where it actually opens, but can't seem to make it do it automatically.

I've created a plunkr showing this, simply click the switch data button:

plunker

Here is what html looks like:

<div bs-active-pane="tabs.activeTab" bs-tabs>
  <div ng-repeat="tab in tabs" title="{{ tab.title }}" disabled="{{ tab.disabled }}" ng-bind="tab.content" bs-pane>
  </div>
  <button ng-click="switchData()">Switch Data</button>
</div>

And the JS:

$scope.tabs = [
  {title:'Home', content: 'Raw denim you probably haven\'t heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica.'},
  {title:'Profile', content: 'Food truck fixie locavore, accusamus mcsweeney\'s marfa nulla single-origin coffee squid. Exercitation +1 labore velit, blog sartorial PBR leggings next level wes anderson artisan four loko farm-to-table craft beer twee.'},
  {title:'About', content: 'Etsy mixtape wayfarers, ethical wes anderson tofu before they sold out mcsweeney\'s organic lomo retro fanny pack lo-fi farm-to-table readymade.', disabled: true}
];

$scope.tabs.activeTab = 1;

$scope.switchData = function() {
  var tabs2 = [
    {title:'Home2', content: 'dfsdfds'},
    {title:'Profile2', content: 'sfsdf'},
    {title:'About2', content: 'urw'}  
  ];
  $scope.tabs.activeTab = 0;
  $scope.tabs = tabs2;
};

Upvotes: 0

Views: 397

Answers (1)

azium
azium

Reputation: 20624

Two issues:

1) You are assigning $scope.tabs.activeTab to 0, then in the next line immediately overwriting it by assigning tabs to a brand new scope variable with $scope.tabs = tabs2

2) Because of the way browser events work, the directive binding is happening out of order with your active tab assignment. Setting it in an timeout of 0, which is basically saying, "do this assignment in the next event cycle" fixes your issue.

Plunker

.controller('TabDemoCtrl', function($scope, $templateCache, $timeout) {

  $scope.switchData = function() {
    var tabs2 = [
      {title:'Home2', content: 'dfsdfds'},
      {title:'Profile2', content: 'sfsdf'},
      {title:'About2', content: 'urw'}  
    ];

    $scope.tabs = tabs2;

    $timeout(function () {
      $scope.tabs.activeTab = 1;
    }, 0)
  };

Upvotes: 1

Related Questions