blocks|key|205108|text|好吧，这取决于，如果你想绑定数据，里面不应该有任何格式，否则你可以bind-html和do+description.replace(/\\n/g,+'<br>')，但不确定这是你想要的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|205109|entityMap^0|X|9|1A|Z|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>Well it depends, if you want to bind datas, there shouldn't be any formatting in it, otherwise you can <code>bind-html</code> and do <code>description.replace(/\\n/g, '&lt;br&gt;')</code>
not sure it's what you want though.</p>


blocks|key|4711156|text|可以，在使用.replace()将/n更改为<br+/>之后，我将使用<pre>标记或使用ng-bind-html-unsafe+http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe+(如果使用的是1.2%2B，请使用ng-ng-bind-html-unsafe-http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4711157|entityMap|0|LINK|mutability|MUTABLE|url|http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe|1^0|6|A|H|2|M|6|Z|5|19|J|4F|J|1T|23|0|4Z|23|1|0^^$0|@$1|2|3|4|5|6|7|O|8|@$9|P|A|Q|B|C]|$9|R|A|S|B|C]|$9|T|A|U|B|C]|$9|V|A|W|B|C]|$9|X|A|Y|B|C]|$9|Z|A|10|B|C]]|D|@$9|11|A|12|1|13]|$9|14|A|15|1|16]]|E|$]]|$1|F|3|-4|5|6|7|17|8|@]|D|@]|E|$]]]|G|$H|$5|I|J|K|E|$L|M]]|N|$5|I|J|K|E|$L|M]]]]

<p>Yes, I would either use the <code>&lt;pre&gt;</code> tag or use <code>ng-bind-html-unsafe</code> <a href="http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe" rel="nofollow">http://docs-angularjs-org-dev.appspot.com/api/ng.directive:ngBindHtmlUnsafe</a> (use ng-bind-html if you are using 1.2+) after using <code>.replace()</code> to change <code>/n</code> to <code>&lt;br /&gt;</code></p>


blocks|key|205231|text|基于@pilau的答案-但有一个即使是公认的答案也没有的改进。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|205232|<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;
}|code-block|syntax|javascript|205233|这将使用给定的换行符和空格，但也会在内容边界处中断内容。有关空格属性的更多信息可以在此处找到：|205234|https://developer.mozilla.org/en-US/docs/Web/CSS/white-space|offset|length|205235|如果您希望在换行处换行，但又不想折叠文本前面的多个空格或空白(以呈现代码或其他内容)，则可以使用：|205236|white-space:+pre-wrap;|205237|不同渲染模式的很好的对比：http://meyerweb.com/eric/css/tests/white-space.html|205238|entityMap|0|LINK|mutability|MUTABLE|url|1|http://meyerweb.com/eric/css/tests/white-space.html^0|0|0|0|0|1O|0|0|0|0|D|1F|1|0^^$0|@$1|2|3|4|5|6|7|11|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|12|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|13|8|@]|9|@]|A|$]]|$1|I|3|J|5|6|7|14|8|@]|9|@$K|15|L|16|1|17]]|A|$]]|$1|M|3|N|5|6|7|18|8|@]|9|@]|A|$]]|$1|O|3|P|5|D|7|19|8|@]|9|@]|A|$E|F]]|$1|Q|3|R|5|6|7|1A|8|@]|9|@$K|1B|L|1C|1|1D]]|A|$]]|$1|S|3|-4|5|6|7|1E|8|@]|9|@]|A|$]]]|T|$U|$5|V|W|X|A|$Y|J]]|Z|$5|V|W|X|A|$Y|10]]]]

<p>Based on @pilau s answer - but with an improvement that even the accepted answer does not have.</p>
<pre><code>&lt;div class=&quot;angular-with-newlines&quot; ng-repeat=&quot;item in items&quot;&gt;
   {{item.description}}
&lt;/div&gt;

/* in the css file or in a style block */
.angular-with-newlines {
    white-space: pre-line;
}
</code></pre>
<p>This will use newlines and whitespace as given, but also break content at the content boundaries. More information about the white-space property can be found here:</p>
<p><a href="https://developer.mozilla.org/en-US/docs/Web/CSS/white-space" rel="noreferrer">https://developer.mozilla.org/en-US/docs/Web/CSS/white-space</a></p>
<p>If you want to break on newlines, but also not collapse multiple spaces or white space preceeding the text (to render code or something), you can use:</p>
<pre><code>white-space: pre-wrap;
</code></pre>
<p>Nice comparison of the different rendering modes: <a href="http://meyerweb.com/eric/css/tests/white-space.html" rel="noreferrer">http://meyerweb.com/eric/css/tests/white-space.html</a></p>


blocks|key|205288|text|css解决方案可以工作，但是您并不能真正控制样式。在我的例子中，我希望在换行符之后有更多的空间。下面是我创建的一个处理这个问题的指令(typescript)：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|205289|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+%2B+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(/([.*%2B?%5E=!:${}()%7C\[\]\/\\])/g,+"\\$1");
++++}
}

angular.module('app').directive('pre',+preDirective);|code-block|syntax|javascript|205290|使用：|205291|<div+class="pre">{{item.description}}</div>|205292|它所做的就是将文本的每个部分包装到一个<p>标记中。在此之后，您可以随心所欲地设计它的样式。|offset|length|style|CODE|205293|entityMap^0|0|0|0|0|J|3|0^^$0|@$1|2|3|4|5|6|7|S|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|T|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|U|8|@]|9|@]|A|$]]|$1|I|3|J|5|D|7|V|8|@]|9|@]|A|$E|F]]|$1|K|3|L|5|6|7|W|8|@$M|X|N|Y|O|P]]|9|@]|A|$]]|$1|Q|3|-4|5|6|7|Z|8|@]|9|@]|A|$]]]|R|$]]

<p>the css solution works, however you do not really get control on the styling. In my case I wanted a bit more space after the line break. Here is a directive I created to handle this (typescript):</p>

<pre class="lang-ts prettyprint-override"><code>function preDirective(): angular.IDirective {
    return {
        restrict: 'C',
        priority: 450,
        link: (scope, el, attr, ctrl) =&gt; {
            scope.$watch(
                () =&gt; el[0].innerHTML,
                (newVal) =&gt; {
                    let lineBreakIndex = newVal.indexOf('\n');
                    if (lineBreakIndex &gt; -1 &amp;&amp; lineBreakIndex !== newVal.length - 1 &amp;&amp; newVal.substr(lineBreakIndex + 1, 4) != '&lt;/p&gt;') {
                        let newHtml = `&lt;p&gt;${replaceAll(el[0].innerHTML, '\n\n', '\n').split('\n').join('&lt;/p&gt;&lt;p&gt;')}&lt;/p&gt;`;
                        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);
</code></pre>

<p>Use:</p>

<pre><code>&lt;div class="pre"&gt;{{item.description}}&lt;/div&gt;
</code></pre>

<p>All it does is wraps each part of the text in to a <code>&lt;p&gt;</code> tag.
After that you can style it however you want.</p>


blocks|key|205337|text|使用CSS可以很容易地实现这一点。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|205338|<div+ng-repeat="item+in+items">
<span+style="white-space:pre-wrap;">+{{item.description}}</span>
</div>++|code-block|syntax|javascript|205339|也可以为此创建一个CSS类，并可从外部CSS文件中使用它|205340|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>With CSS this can be achieve easily.</p>

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

<p>Or a CSS class can be created for this purpose and can be used from external CSS file </p>


blocks|key|205374|text|只需使用css样式“空白:预包装”，您就应该可以使用了。我也遇到过同样的问题，我需要处理错误消息，而换行符和空格是非常特殊的。我只是在绑定数据的地方添加了这个内联，它工作起来很有魅力！|type|unstyled|depth|inlineStyleRanges|entityRanges|data|205375|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

<p>Just use the css style "white-space: pre-wrap" and you should be good to go. I've had the same issue where I need to handle error messages for which the line breaks and white spaces are really particular. I just added this inline where I was binding the data and it works like Charm!</p>


blocks|key|205409|text|我也遇到过和你类似的问题。我并不热衷于这里的其他答案，因为它们真的不能让你很容易地设计换行符的行为。我不确定您是否可以控制原始数据，但我采用的解决方案是将“项”从字符串数组转换为数组数组，其中第二个数组中的每个项都包含一行文本。这样你就可以做一些类似的事情：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|205410|<div+ng-repeat="item+in+items">
++<p+ng-repeat="para+in+item.description">
+++++{{para}}
++</p>
</div>|code-block|syntax|javascript|205411|通过这种方式，您可以将类应用于段落，并使用CSS很好地设置它们的样式。|205412|entityMap^0|0|0|0^^$0|@$1|2|3|4|5|6|7|K|8|@]|9|@]|A|$]]|$1|B|3|C|5|D|7|L|8|@]|9|@]|A|$E|F]]|$1|G|3|H|5|6|7|M|8|@]|9|@]|A|$]]|$1|I|3|-4|5|6|7|N|8|@]|9|@]|A|$]]]|J|$]]

<p>I had a similar problem to you. I'm not that keen on the other answers here because they don't really allow you to style the newline behaviour very easily. I'm not sure if you have control over the original data, but the solution I adopted was to switch "items" from being an array of strings to being an array of arrays, where each item in the second array contained a line of text. That way you can do something like:</p>

<pre><code>&lt;div ng-repeat="item in items"&gt;
  &lt;p ng-repeat="para in item.description"&gt;
     {{para}}
  &lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>This way you can apply classes to the paragraphs and style them nicely with CSS.</p>


<p>I have seen <a href="https://stackoverflow.com/questions/15449325/how-can-i-preserve-new-lines-in-an-angular-partial">this</a> SO question.</p>

<p>My code instead of <code>ng-bind="item.desc"</code> uses <code>{{item.desc}}</code> because I have a <code>ng-repeat</code> before.</p>

<p>So my code:</p>

<pre><code>&lt;div ng-repeat="item in items"&gt;
  {{item.description}}
&lt;/div&gt;
</code></pre>

<p>The item description contains <code>\n</code> for newlines which are not rendered.</p>

<p>How can the <code>{{item.description}}</code> display the newlines easily assuming that I have the <code>ng-repeat</code> above?</p>


Preserve line breaks in angularjs

我见过如此质疑。我的代码而不是ng-bind="item.desc"使用{{item.desc}}，因为我之前有一个ng-repeat。所以我的代码是：<div ng-repeat="item in items">  {{item.description}}</div>项目描述包含未呈现的新行的\n。假设我有上面的ng...

问在angularjs中保留换行符
EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在angularjs中保留换行符EN

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问在angularjs中保留换行符
EN