Angular ui-bootstrap with ng-repeat: if there's no tabs, new tab isn't selected

Question

Here's the link to demonstrate my problem: http://codepen.io/pietrofxq/pen/ZLLJdr?editors=1010

Click in "remove tabs" and then in "add tab"

The issue: I do a loop with ng-repeat to display tabs. But there may be a time when there's no items in the array, and when I add one tab back, I'd like this tab to come already selected, because it's the only one in the tabs array. The behavior now is that I have to click in the tab to angular to know that that tab is selected. How can I make this tab selected when I add it in the array?

Pietro Coelho · Accepted Answer · 2017-01-18 23:03:57Z

0

Found a dirty hack to make it work.

I have more than one tab, so I need to keep track of each one:

$scope.tabs = {
  tabOne: 0,
  tabTwo: 0
}

<uib-tabset active="tabs.tabOne"></uib-tabset>
<uib-tabset active="tabs.tabTwo"></uib-tabset>

When the array is empty and I add one more tab, I have to reset the value inside a $timeout call:

$scope.$watch("items", function() {
 $timeout(function() {
    for (var prop in $scope.tabs)
      $scope.tabs[prop] = 0 
  })
}

answered Jan 18, 2017 at 23:03

Pietro Coelho

2,1121 gold badge27 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular ui-bootstrap with ng-repeat: if there's no tabs, new tab isn't selected

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related