Question

我的JSON文本看起来像这样：

.collapseOne:not.in

然后我有一个看起来像这样的简单div：

<h2>Bootstrap collapse panel with radio buttons</h2>

<br />
<div class="container">
  <div class="row">
    <div class="col-xs-12">
      <span>Display panel: </span>

        <input name="collapseGroup" type="radio" data-toggle="collapse" data-target=".collapseOne:not(.in)"/> Yes

        <input name="collapseGroup" type="radio" data-toggle="collapse" data-target=".collapseOne.in" checked/> No


      <div class="panel-group" id="accordion">
        <div class="panel panel-default">
          <div class="panel-heading">
            <h4 class="panel-title">
                    Header
                </h4>
          </div>
          <div class="collapseOne panel-collapse collapse">
            <div class="panel-body">
              <p>Content</p>
            </div>
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

由于某种原因，呈现给页面的文本没有换行符。即

"some text some text some text \n\n New paragraph text \n\n Another new paragraph"

如果我使用chrome dev工具查看该文本，它会显示使用\ n换行符分割成段落的文本块，就像我预期的那样。

<div ng-bind="textFromJSON"></div>

有谁知道如何让页面正确呈现？

Answer 1

确实如此。问题是html没有显示它，因为白色空间默认设置，将div更改为：

<div ng-bind="textFromJSON" style="white-space:pre-wrap"></div>

请参阅https://jsfiddle.net/xtqe7on2/作为示例

Answer 2

您可以使用<pre>

    <div><pre>{{textFromJSON}}</pre></div>

Answer 3

在Angular 2+中，您可以这样使用：

<pre>{{textInJSON | json}}</pre>

为什么有角度的ng-bind没有从JSON读取\ n换行符？

3 个答案: