在HTML / AngularJS中添加新行

Question

我试图让AngularJS和/或HTML在两行单独的代码中打印出以下内容：

FOO
BAR

但是我下面的HTML和JS显示在同一行上，尽管我的换行符是\n。

<div ng-controller="MyCtrl">
  {{name}}!
</div>

JavaScript

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    $scope.name = 'FOO \n BAR';
}

这个是可能的吗？

JSFiddle

Answer 1

您可以简单地使用<br>：

JS

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
   $scope.name = 'FOO <br> BAR';
}

<div ng-controller="MyCtrl">
  <span class="name" ng-bind-html-unsafe="name"></span>!
</div>

更多关于ng-bind指令的文档：https://docs.angularjs.org/api/ng/directive/ngBindHtml

Answer 2

在HTML中，所有行中断、制表符和空格被忽略。如果您想插入一个新行。使用<br/>代替