在 PHP 中回显时，新行在 Javascript 函数中不起作用答案

【问题标题】：New lines not working in Javascript function when echoing in PHP在 PHP 中回显时，新行在 Javascript 函数中不起作用
【发布时间】：2016-07-03 00:32:48
【问题描述】：

下面的代码使用 Javascript 和 PHP，但是当它运行时，我希望每个回显都在单独的行上。我尝试过使用 \n 和
和其他方法，但它们都对文本没有任何影响。谁能帮帮我？

function MyCtrl($scope) {
  $scope.environment_service_packages = 
    [
      {name: 'obj1', info: {text: '<?php echo "hello" . "\n" . "<br>" . "world"; ?>', show: true}},
      {name: 'obj2', info: {text: 'some extra info for obj2', show: false}},
    ];
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app>
  <table ng-controller="MyCtrl" class="table table-hover table-striped">
    <tr class="info">
      <td>...</td>
    </tr>
    <tbody ng-repeat="x in environment_service_packages">
      <tr ng-click="x.info.show = !x.info.show">
        <td> {{ x.name }}
      </tr>
      <tr ng-show="x.info.show">
        <td>
          {{ x.info.text }}
        </td>
      </tr>
    </tbody>
  </table>
</body>

编辑：由于某种原因，这个 sn-p 不能解释 php。

【问题讨论】：

我无法运行您的代码——它充满了未定义的变量。请查看此页面 -- minimal reproducible example -- 并给我们一个示例，该示例仅包含您希望我们解决的问题。
@TopologicalSort 好的，我已经更新了问题。
您的<br> 在这种情况下应该可以工作。您可以通过在 html 中手动编写内容来做一个小证明。为什么（有什么效果）你说他们没有工作？它们是否呈现为文本？如果是这样，可能是您的框架或引擎将其转义以输出文本表单。还是CSS的东西？没有一个最小的完整示例很难说。但是， td 中的 br 标记确实会产生换行符:)
试试<td ng-bind-html="x.info.text"></td> BTW - angularjs 的整个想法不是在客户端注入 PHP ......
@AlonEitan 没关系。我应该把那个代码放在哪里？

标签： javascript php newline

【解决方案1】：

你只需要把表达式放在<pre></pre>标签之间：

<td>
    <pre>{{ x.info.text }}</pre>
</td>

然后使用\n 作为换行符（忘记<br>）。

这是一个工作示例。我删除了 PHP 标记并使用纯文本进行演示：

text: 'line 1\nline 2'

顺便说一句 - 您可以将 PRE 标记替换为 white-space: pre; css 样式。

function MyCtrl($scope) {
  $scope.environment_service_packages = 
    [
      {name: 'obj1', info: {text: 'line 1\nline 2', show: true}},
      {name: 'obj2', info: {text: 'some extra info for obj2', show: false}},
    ];
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app>
  <table ng-controller="MyCtrl" class="table table-hover table-striped">
    <tr class="info">
      <td>...</td>
    </tr>
    <tbody ng-repeat="x in environment_service_packages">
      <tr ng-click="x.info.show = !x.info.show">
        <td> {{ x.name }}
      </tr>
      <tr ng-show="x.info.show">
        <td>
          <pre>{{ x.info.text }}</pre>
        </td>
      </tr>
    </tbody>
  </table>
</body>

【讨论】：

谢谢！
没有考虑前。你是对的。否则用数组表示文本并在标记中嵌套 ng-repeat
我确实赞成您的回答，因为它为我的解决方案提供了替代方案。很高兴和你聊天；）
由于某种原因，php 一直有效，直到我添加了 \n 然后它只显示顶部的蓝色而不显示它下面的框。
@Jez 尝试使用json_encode：text: <?php echo json_encode("hello\n" . $myVar); ?> - 注意您不应该用任何引号将属性值括起来。这将解释我在说什么：echo '{text: ' . json_encode('value with " and \' chars') . '}';

【解决方案2】：

ng-bindings 不解释 html 实体，因此您必须以这样的方式表示您的回声：

function MyCtrl($scope) {
  $scope.environment_service_packages = 
    [
      {name: 'obj1', info: {text:['<?php echo "hello" ?>','<?php echo  "world"; ?>'], show: true}},
      {name: 'obj2', info: {text: 'some extra info for obj2', show: false}},
    ];
}




<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app>
  <table ng-controller="MyCtrl" class="table table-hover table-striped">
    <tr class="info">
      <td>...</td>
    </tr>
    <tbody ng-repeat="x in environment_service_packages">
      <tr ng-click="x.info.show = !x.info.show">
        <td> {{ x.name }} </td>
      </tr>
      <tr ng-show="x.info.show">
        <td>
          <p ng-repeat="txt in x.info.text">{{ txt }}</p>
        </td>
      </tr>
    </tbody>
  </table>
</body>

您的第一个 <td> 标记未关闭。

<tr ng-click="x.info.show = !x.info.show">
    <td> {{ x.name }} </td>
</tr>
<tr ng-show="x.info.show">
   <td>
      <p ng-repeat="txt in x.info.text">{{ txt }}</p>
   </td>
</tr>

顺便说一句，在 Angular 代码中回显 PHP 是一种不好的做法。

【讨论】：

那么 à 表数据单元格内的
没有理由不换行。
但是<br>标签在第二个单元格上，它有一个结束</td>标签
是的，但是，一些上层 html 代码可能会破坏其余部分。我已经在 chrome 上测试了表格，即使之前的没有关闭，
标记也可以工作。所以你是对的，但这是我能看到的唯一可以阻止它工作的东西。
原因是ngBind（相当于{{ expression }}）不适用于html实体：Reference ngBind属性告诉Angular替换 text 具有给定表达式值的指定 HTML 元素的内容 OP 在其控制器中使用 PHP - 这是我以前从未见过的...整个