javascript - 尝试在两行中定义名称时无法识别\n

Question

我有多个选项卡，选项卡的名称应该出现在两行中。

请查找演示 here 我在分配选项卡名称时尝试使用\n 但它没有被识别。有什么建议吗？ js代码:

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     

});

在标签名称中，有源模块和无源模块应显示在标签的第二行，如下所示。

  Tab1 Name            Tab2 Name  
Active Modules      Active Modules

--编辑--- 请查找更新的 link使用jsalonen在下面的答案中提到的代码。我收到以下错误，打开 plunker 时可以在控制台中看到该错误，解决此错误的任何建议:

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

Answer 1

除非您使用 <pre> 之类的标签，否则不会呈现包括换行符在内的空格这样做或使用 CSS 中的 white-space 属性明确设置:

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

此外，如果除了简单的换行符之外还需要分配更多样式，我会改为将每个文本行封装在新元素中(或者只在每个名称字段部分之间输出 <br />)。这需要您按如下方式调整代码。

将标签名称存储为数组:

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

在模板中将它们作为数组处理:

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

有关工作代码，请参阅此 Plunker:http://plnkr.co/edit/GgCORbr9mOn6iVA3EXiw?p=preview