diff --git a/src/tabs/tabs.js b/src/tabs/tabs.js index 8fe543c6a4..524cad2714 100644 --- a/src/tabs/tabs.js +++ b/src/tabs/tabs.js @@ -88,7 +88,7 @@ angular.module('ui.bootstrap.tabs', []) replace: true, scope: {}, bindToController: { - active: '=', + active: '=?', type: '@' }, controller: 'UibTabsetController', @@ -101,6 +101,9 @@ angular.module('ui.bootstrap.tabs', []) scope.$parent.$eval(attrs.vertical) : false; scope.justified = angular.isDefined(attrs.justified) ? scope.$parent.$eval(attrs.justified) : false; + if (angular.isUndefined(attrs.active)) { + scope.active = 0; + } } }; }) @@ -115,7 +118,7 @@ angular.module('ui.bootstrap.tabs', []) transclude: true, scope: { heading: '@', - index: '=', + index: '=?', onSelect: '&select', //This callback is called in contentHeadingTransclude //once it inserts the tab's content into the dom onDeselect: '&deselect' @@ -132,6 +135,14 @@ angular.module('ui.bootstrap.tabs', []) }); } + if (angular.isUndefined(attrs.index)) { + if (tabsetCtrl.tabs && tabsetCtrl.tabs.length) { + scope.index = Math.max.apply(null, tabsetCtrl.tabs.map(function(t) { return t.index; })) + 1; + } else { + scope.index = 0; + } + } + scope.select = function() { if (!scope.disabled) { var index; diff --git a/src/tabs/test/tabs.spec.js b/src/tabs/test/tabs.spec.js index 8deb7ee18d..f5c92a5eca 100644 --- a/src/tabs/test/tabs.spec.js +++ b/src/tabs/test/tabs.spec.js @@ -153,6 +153,41 @@ describe('tabs', function() { }); }); + describe('without active binding and index attributes', function() { + beforeEach(inject(function($compile, $rootScope) { + scope = $rootScope.$new(); + scope.first = '1'; + scope.second = '2'; + elm = $compile([ + '', + ' ', + ' first content is {{first}}', + ' ', + ' ', + ' second content is {{second}}', + ' ', + '' + ].join('\n'))(scope); + scope.$apply(); + return elm; + })); + + it('should bind tabs content and set first tab active', function() { + expectContents(['first content is 1', 'second content is 2']); + expect(titles().eq(0)).toHaveClass('active'); + expect(titles().eq(1)).not.toHaveClass('active'); + expect(elm.controller('uibTabset').active).toBe(0); + }); + + it('should change active on click', function() { + titles().eq(1).find('> a').click(); + expect(contents().eq(1)).toHaveClass('active'); + expect(titles().eq(0)).not.toHaveClass('active'); + expect(titles().eq(1)).toHaveClass('active'); + expect(elm.controller('uibTabset').active).toBe(1); + }); + }); + describe('tab callback order', function() { var execOrder; beforeEach(inject(function($compile, $rootScope) { @@ -579,7 +614,7 @@ describe('tabs', function() { describe('remove', function() { it('should remove title tabs when elements are destroyed and change selection', inject(function($controller, $compile, $rootScope) { scope = $rootScope.$new(); - elm = $compile('Hellocontent {{i}}')(scope); + elm = $compile('Hellocontent {{i}}')(scope); scope.$apply(); expectTitles(['1']);