My issue involves the display of tab names in two lines within multiple tabs.
You can view the demonstration here. I attempted to use the \n character while setting the tab name but it was not recognized. Any suggestions on how to achieve this? Here is the JavaScript code snippet:
var myApp = angular.module('tabs', [ 'ui.bootstrap']);
myApp.controller('tabsctrl', function ($rootScope,$scope) {
$rootScope.tabName ='MyTab Name';
$rootScope.tabValue="tab1Value";
$scope.applicationData = {};
$scope.activeModule = "tab1Value";
$scope.programModules=[{"tabName":"Tab1 Name \n Active Modules","tabValue":"tab1Value"},{"tabName":"Tab2 Name \n NonActive modules","tabValue":"tab2Value"}];
//code
});
The desired format for the tab names should be as follows:
Tab1 Name Tab2 Name
Active Modules Active Modules
--EDIT--- For the updated solution, please refer to this link. Following the recommendation by jsalonen, I encountered the error below in the console when opening the Plunker. Any advice on resolving this?
angular.js:12477 Error: [ngRepeat:dupes] Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: tabName in pg.tabNames, Duplicate key: string:e, Duplicate value: e