angularjsangular-ui-bootstrapangular-uiangular-ui-tabset

How to bind active tab to last element of an array from scope


I'm trying to set uib-tabset active to my last element of an array. However, when I'm doing it uib-tabset is going crazy, it deletes it's own tabs. I don't want to own a scope field for active uib-tabset, I want to use array length to identify which tab should be active. Is it possible?

<uib-tabset active="tabs.length">
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" 
      disable="tab.disabled">
      {{tab.content}}
    </uib-tab>
</uib-tabset>

leads to unexpected results like deleting own tabs. Full example : https://plnkr.co/edit/JJ0k8LtRPXqXKrjEM0bn?p=preview Try to click on first tab.


Solution

  • As we need to active last tab initially we can use ng-init for it. Please go through the code hope it will work for you.

    <uib-tabset ng-init="active=tabs.length" active="active">
        <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" 
          disable="tab.disabled">
          {{tab.content}}
        </uib-tab>
      </uib-tabset>