186

我已经看到了这个SO question。

我的代码而不是ng-bind="item.desc"使用{{item.desc}}，因为我有一个ng-repeat之前。

所以我的代码：

<div ng-repeat="item in items">
  {{item.description}}
</div>

项目描述包含\n未呈现的换行符。

{{item.description}}假设我有上述内容，如何轻松显示换行符ng-repeat？

4

10 回答 10

306

基于@pilau 的答案 - 但即使是接受的答案也没有改进。

<div class="angular-with-newlines" ng-repeat="item in items">
   {{item.description}}
</div>

/* in the css file or in a style block */
.angular-with-newlines {
    white-space: pre-line;
}

这将使用给定的换行符和空格，但也会在内容边界处中断内容。有关 white-space 属性的更多信息，请参见此处：

https://developer.mozilla.org/en-US/docs/Web/CSS/white-space

如果您想换行，但又不想折叠文本前面的多个空格或空格（以呈现代码或其他内容），您可以使用：

white-space: pre-wrap;

不同渲染模式的不错比较：http: //meyerweb.com/eric/css/tests/white-space.html

于 2014-10-01T13:07:14.840 回答
126

尝试：

<div ng-repeat="item in items">
  <pre>{{item.description}}</pre>
</div>

包装器将使用as text<pre>打印文本\n

另外，如果您打印 json，为了更好看，请使用json过滤器，例如：

<div ng-repeat="item in items">
  <pre>{{item.description|json}}</pre>
</div>

Demo

我同意@Paul Weber这white-space: pre-wrap;是更好的方法，无论如何使用<pre>- 主要用于调试一些东西的快速方法（如果你不想在造型上浪费时间）

于 2013-10-30T14:15:52.533 回答
63

使用 CSS 非常简单（我发誓它有效）。

.angular-with-newlines {
  white-space: pre;
}
  • 看妈！没有额外的 HTML 标签！
于 2014-08-21T17:12:59.400 回答
17

使用 CSS 可以轻松实现。

<div ng-repeat="item in items">
<span style="white-space:pre-wrap;"> {{item.description}}</span>
</div>

或者可以为此创建一个 CSS 类，并可以从外部 CSS 文件中使用

于 2016-06-08T06:38:32.290 回答
2

好吧，这取决于，如果你想绑定数据，它不应该有任何格式，否则你可以bind-html并且description.replace(/\\n/g, '<br>') 不确定它是你想要的。

于 2013-10-30T14:19:35.817 回答
1

css 解决方案有效，但是您并不能真正控制样式。在我的情况下，我想要换行后更多的空间。这是我为处理此问题而创建的指令（打字稿）：

function preDirective(): angular.IDirective {
    return {
        restrict: 'C',
        priority: 450,
        link: (scope, el, attr, ctrl) => {
            scope.$watch(
                () => el[0].innerHTML,
                (newVal) => {
                    let lineBreakIndex = newVal.indexOf('\n');
                    if (lineBreakIndex > -1 && lineBreakIndex !== newVal.length - 1 && newVal.substr(lineBreakIndex + 1, 4) != '</p>') {
                        let newHtml = `<p>${replaceAll(el[0].innerHTML, '\n\n', '\n').split('\n').join('</p><p>')}</p>`;
                        el[0].innerHTML = newHtml;
                    }
                }
            )
        }
    };

    function replaceAll(str, find, replace) {
        return str.replace(new RegExp(escapeRegExp(find), 'g'), replace);
    }

    function escapeRegExp(str) {
        return str.replace(/([.*+?^=!:${}()|\[\]\/\\])/g, "\\$1");
    }
}

angular.module('app').directive('pre', preDirective);

利用：

<div class="pre">{{item.description}}</div>

它所做的只是将文本的每一部分包装到一个<p>标签中。之后，您可以随意设置它的样式。

于 2016-04-26T17:09:49.190 回答
1

只需将其添加到您的样式中，这对我有用

white-space: pre-wrap

通过这个文本<textarea>可以显示，因为它在那里有空格和线刹车

HTML

   <p class="text-style">{{product?.description}}</p>

CSS

.text-style{
    white-space: pre-wrap
}
于 2019-06-14T15:49:51.653 回答
0

是的，我要么使用<pre>标签，要么在使用后使用ng-bind-html-unsafe http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe（如果您使用的是 1.2+，请使用 ng-bind-html .replace()）更改/n为<br />

于 2013-10-30T14:24:19.727 回答
0

只需使用 css 样式“white-space: pre-wrap”就可以了。我遇到了同样的问题，我需要处理换行符和空格非常特殊的错误消息。我刚刚在绑定数据的地方添加了这个内联，它就像 Charm 一样工作！

于 2017-11-14T20:39:44.010 回答
0

我和你有类似的问题。我对这里的其他答案并不那么热衷，因为它们实际上并不允许您非常轻松地设置换行行为的样式。我不确定您是否可以控制原始数据，但我采用的解决方案是将“项目”从字符串数组切换为数组数组，其中第二个数组中的每个项目都包含一行文本. 这样，您可以执行以下操作：

<div ng-repeat="item in items">
  <p ng-repeat="para in item.description">
     {{para}}
  </p>
</div>

通过这种方式，您可以将类应用于段落并使用 CSS 很好地设置它们的样式。

于 2018-10-24T17:07:00.700 回答