Question

下面的代码使用Javascript和PHP，但是当它运行时，我希望每个echo都在一个单独的行上。我尝试过使用\ n和＆lt; br＆gt;和其他方法，但所有这些方法都没有对文本产生任何影响。有人可以帮帮我吗？

＆＃13;

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}},
    ];
}

＆＃13;

<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>

＆＃13;

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

Answer 1

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

Answer 2

您只需将表达式放在<pre></pre>标记之间：

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

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

这是一个有效的例子。我删除了PHP标记，并使用纯文本进行演示：

text: 'line 1\nline 2'

BTW - 您可以使用PRE css样式替换white-space: pre;代码。

＆＃13;

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}},
    ];
}

＆＃13;

<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>

＆＃13;

在PHP

2 个答案: