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

Question

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

Possible duplicate of [Using new line(\n) in string and rendering the same in HTML](https://stackoverflow.com/questions/8573890/using-new-line-n-in-string-and-rendering-the-same-in-html) — Daniel Beck, Jun 20 '17 at 21:36

jsalonen · Answer 1 · 2017-06-20T21:34:39.420

5

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

edited Jun 20 '17 at 21:34

answered Jun 20 '17 at 21:26

jsalonen

29,593
15
91
109

Please find the updated link with your answer http://plnkr.co/edit/Uwg7ZiH9E3Gj5zGydTjs?p=preview. Its not working.Any suggestions.thanks – joann Jun 20 '17 at 21:29
Can we do the same without modifying the code
- {{pg.tabName}}
– joann Jun 20 '17 at 21:54
Yes we can. Use the CSS rule given in the first snippet. However: if your tab component has fixed height, then newlines will probably break those styles anyway. So you may need to change that component as well. For possible fix, see this question: https://stackoverflow.com/questions/22495828/bootstrap-3-tabs-with-two-liner-titles – jsalonen Jun 20 '17 at 21:55
This is the error message i'm getting Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: tabName in pg.tabNames, Duplicate key: string:i, Duplicate value: i – joann Jun 20 '17 at 22:03
Please find the updated link http://plnkr.co/edit/3VBImpJyvAyyjS4iUkzH?p=preview which tracked the issue. Any suggestions would be helpful. – joann Jun 20 '17 at 22:11
@joann you need to convert your tabName attribute to array. Otherwise repeater will interpret each character of your string as a new item. – jsalonen Jun 20 '17 at 22:15
Oh ok. Thanks. Is there any easier way to achieve this :). Being a newbie having touch time – joann Jun 20 '17 at 22:23

score 0 · Answer 2 · answered Jun 20 '17 at 21:31

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"}];

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

2 Answers2