CODEWITHSUNDEEP
javascripthtml
joann
joann

Reputation: 53

\n is not recognized when trying to define name in two lines

I have multiple tabs, the name of the tab should appear in two lines.

Please find the demo here I tried to use \n while assigning the tabname but it didn't recognized.Any suggestions? js code:

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     

});

In the tabname Active Modules and Non Active modules should be shown in second line of the tab as below.

  Tab1 Name            Tab2 Name  
Active Modules      Active Modules

--EDIT--- Please find the updated link with the code mentioned in the below answer by jsalonen. I am getting the below error which can be seen in the console when plunker is opened,any suggestions to resolve this error:

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

Upvotes: 1

Views: 101

Answers (2)

jsalonen
jsalonen

Reputation: 30521

White spaces including line breaks are not rendered unless you either use a tag like <pre> that does that or explictly set that using white-space property in CSS:

.nav-tabs li {
  white-space: pre;
}

And besides, if you need assign more styling besides simple newline, I would instead encapsulate each of the text lines inside new elements (or just output <br /> between each name field fraction). This would require you to tweak your code as follows.

Store tabnames as array:

$scope.programModules=[{"tabNames":["Tab1 Name Active Modules"],"tabValue":"tab1Value"},{"tabNames":["Tab2 Name", "NonActive modules"],"tabValue":"tab2Value"}];

Process them as array in template:

<div class="tabname-fraction" ng-repeat="tabName in pg.tabNames">
  {{tabName}}
</div>

For working code, see this Plunker: http://plnkr.co/edit/GgCORbr9mOn6iVA3EXiw?p=preview

Upvotes: 5

Dave
Dave

Reputation: 4412

Web browsers ignore whitespace unless explicitly told otherwise. This is a good thing, because it makes it easier to create readable HTML.

You're much better off using HTML elements if you want to create multi-line elements.

<li style='white-space:pre' role="presentation" class="{{ pg.tabValue == activeModule? 'active':''}}" ng-repeat="pg in programModules">
    <a href="javascript:void(0)"  ng-click="loadApplicationData(pg.tabValue,pg.tabName)" >{{pg.tabName}}
        <div ng-bind='pg.tabFirstLine'></div>
        <div ng-bind='pg.tabSecondLine'></div>
    </a>
</li>

You'll also need to change your data a little:

$scope.programModules=[{"tabFirstLine":"Tab1 Name","tabSecondLine": "Active Modules","tabValue":"tab1Value"},
    {"tabFirstLine":"Tab2 Name", "tabSecondLine": "NonActive modules","tabValue":"tab2Value"}];

Upvotes: 0

Related Questions