Question

我见过this问题。

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

所以我的代码：

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

项目说明包含\n表示未呈现的换行符。

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

Answer 1

基于@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-wrap;
}

这将使用给定的换行符和空格，但也会在内容边界处中断内容。有关白色空间属性的更多信息，请访问：

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

如果你想打破换行符，但也要在文本前面折叠多个空格或空格（非常类似于原始浏览器行为），你可以使用@aaki建议：

white-space: pre-line;

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

Answer 2

尝试：

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

<pre>包装器将以\n作为文本打印文本

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

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

Demo

我同意@Paul Weber white-space: pre-wrap;是更好的方法，无论如何使用<pre> - 主要用于调试某些内容的快捷方式（如果您不想浪费时间在样式上）

Answer 3

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

.angular-with-newlines {
  white-space: pre;
}

看马！没有额外的HTML标签！

Answer 4

使用CSS可以轻松实现。

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

或者可以为此目的创建CSS类，并且可以从外部CSS文件

使用

Answer 5

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

Answer 6

css解决方案有效，但是您无法真正控制样式。在我的情况下，在换行后我想要更多的空间。这是我为处理这个（typescript）而创建的指令：

app.get('/todo', function(req,res,next){
  res.render('index')
)};
app.post('/todo', function(req,res,next({
  Todo.create(req.body.title+req.body.description, function(err, todo){
    if(err) throw err;
    res.json(req.body);
});
});

使用：

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>标签中。之后，您可以根据需要设置样式。

Answer 7

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

Answer 8

只需使用css样式＆＃34; white-space：pre-wrap＆＃34;你应该好好去。我有同样的问题，我需要处理错误信息，其中换行符和空格非常特别。我刚刚将这个内联添加到我绑定数据的地方，它就像Charm一样！

Answer 9

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

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

这样，您可以将类应用于段落并使用CSS很好地设置样式。

Answer 10

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

white-space: pre-wrap

<textarea>中的此文本可以在那里显示，带有空格和线制动器

HTML

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

CSS

.text-style{
    white-space: pre-wrap
}

保留angularjs中的换行符

10 个答案: