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

Question

下面的代码使用了 Javascript 和 PHP，但是当它运行时我希望每个 echo 都在一个单独的行上。我尝试过使用 \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>

编辑：出于某种原因，此代码段不解释 php。

Answer 1

ng-bindings 不解释 html 实体，因此您必须这样表示您的 echoes :

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 是不好的做法。

Answer 2

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

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

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

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

text: 'line 1\nline 2'

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

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>

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

New lines not working in Javascript function when echoing in PHP

javascript

php

newline