javascriptangularjsangular-ui-bootstrapangular-ui-tabset

Add tab with active and ng-repeat in uib-tab

So I've been trying to figure this out for a while and I see a post similar to this but unanswered, so I'll try posting this but with a plunkr to show as an example.

So the issue is that on load, I notice that the ui-tab is always set to the Add Tab button. What I want to do is have the first element in ui-tab ng-repeat to be active and not the static Add Tab button.

<uib-tabset active="activeTabIndex"> <uib-tab ng-repeat="tab in tabs" heading="{{tab.title}}">Some content</uib-tab> <uib-tab heading="Add a tab" ng-click="addTab()" >Add a tab</uib-tab> </uib-tabset>

https://plnkr.co/edit/XrYSKLdyN1cegfcdjmkz?p=preview

How can I achieve this? I've been at it for a bit but still have no clue on how to resolve this.

Thanks,

Solution

  • Guess you may like this fixed plunker,

    A little tricky by create your own directive rather than use an extra <uib-tab> to achieve there.

    Sample code:

    <!doctype html>
<html ng-app="ui.bootstrap.demo">

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
  <script src="https://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.2.4.js"></script>
  <script type="text/javascript">
    angular.module('ui.bootstrap.demo', ['ngAnimate', 'ui.bootstrap']);
    angular.module('ui.bootstrap.demo').controller('TabsDemoCtrl', function($scope, $window, $timeout) {

      $scope.tabs = [{
        title: 'Tab1',
        content: 'content1'
      }, {
        title: 'Tab2',
        content: 'content2'
      }];
      $scope.activeTabIndex = 0;//$scope.tabs.length - 1;

      $scope.addTab = function() {
        var newTab = {
          title: 'Tab ' + ($scope.tabs.length + 1),
          content: 'content ' + ($scope.tabs.length + 1)
        };
        $scope.tabs.push(newTab);
        $timeout(function() {
          $scope.activeTabIndex = ($scope.tabs.length - 1);
        });
        console.log($scope.activeTabIndex);
      };
    });
    angular.module('ui.bootstrap.demo').directive('uibTabButton', function() {
      return {
        restrict: 'EA',
        scope: {
          handler: '&',
          text:'@'
        },
        template: '<li class="uib-tab nav-item">' +
          '<a href="javascript:;" ng-click="handler()" class="nav-link" ng-bind="text"></a>' +
          '</li>',
        replace: true
      }
    });
  </script>
  <link href="https://netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
</head>

<body>
  <div ng-controller="TabsDemoCtrl">

    Active index: {{ activeTabIndex }}
    <br /> Tab count: {{ tabs.length }}
    <br />

    <input type="button" value="Add Tab" ng-click="addTab()" />

    <uib-tabset active="activeTabIndex">
      <uib-tab active="activeTabIndex==$index" ng-repeat="tab in tabs" heading="{{tab.title}}">{{tab.content}}</uib-tab>
      <uib-tab-button handler="addTab()" text="Add a tab"></uib-tab-button>
    </uib-tabset>
  </div>
</body>

</html>