Question

我有多个标签，标签名称应该以两行显示。

请找到演示here 我尝试在分配tabname时使用\ 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

- 编辑--- 请使用jsalonen在下面的答案中找到更新的link。我收到以下错误，可以在打开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中的空白属性明确设置，否则不会呈现包含换行符的空格：

.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

Answer 2

Web浏览器会忽略空格，除非另有明确说明。这是一件好事，因为它可以更容易地创建可读的HTML。

如果要创建多行元素，最好还是使用HTML元素。

<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>

您还需要稍微更改一下数据：

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

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

2 个答案: