New lines not working in Javascript function when echoing in PHP

Question

This code below uses Javascript and PHP, but when it runs I want each echo to be on a separate line. I have tried using \n and and other methods but all of them dont have any effect on the text. Can anyone please help me?

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>

Edit: For some reason this snippet does not interpret the php.

I can't run your code -- it's full of undefined variables. Please see this page -- minimal reproducible example -- and give us an example that only has the problem you want us to address. — Topological Sort
– Topological Sort, Commented Jul 3, 2016 at 2:01
Your   should work in this case. You can do a small proof by writing your content manually in the html. Why (what's the effect) do you say they didn't work? Did they render as text? If so, it is probably your framework or engine escaping it to output a text form. Or a CSS thing? Hard to say without a minimal complete example. However, br tags inside a td do produce a newline :) — sidyll
– sidyll, Commented Jul 3, 2016 at 3:35
Try <td ng-bind-html="x.info.text"></td> BTW - The whole idea of angularjs is NOT to have PHP injected in the client side.......... — Alon Eitan
– Alon Eitan, Commented Jul 3, 2016 at 3:36

Alon Eitan · Accepted Answer · 2016-07-03 04:20:11Z

2

You just need to put the expression between <pre></pre> tags:

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

And then use \n as a line break (Forget the  ).

Here's a working example. I removed the PHP tags and used plain text for the demo:

text: 'line 1\nline 2'

BTW - You can replace the PRE tags with a white-space: pre; css style.

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>

answered Jul 3, 2016 at 4:20

Alon Eitan

12k8 gold badges51 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

12 Comments

Jez Over a year ago

Thank you for this!

Francois Over a year ago

Didn't think about the pre. You're right. Otherwise represent text by array and nest ng-repeat in the <td> tag

Alon Eitan Over a year ago

I did upvoted your answer, because it provide an alternative to my solution. Nice chatting with you ;)

Jez Over a year ago

For some reason, the php works until i add the \n then it just shows the top blue one and does not show the boxes below it.

Alon Eitan Over a year ago

@Jez Try working with json_encode: text: <?php echo json_encode("hello\n" . $myVar); ?> - Note that you should NOT wrap the what should be the property value with any quotes. This will explain what i'm talking about: echo '{text: ' . json_encode('value with " and \' chars') . '}';

|

Francois · Accepted Answer · 2016-07-03 08:04:30Z

2

The ng-bindings do not interpret html entities therefore you have to represent your echoes a such :

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>

Your first <td> tag is not closed.

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

By the way, It's bad practice to echo PHP in your Angular code.

edited Jul 3, 2016 at 8:04

answered Jul 3, 2016 at 3:55

Francois

3,09016 silver badges21 bronze badges

6 Comments

Alon Eitan Over a year ago

I think that the browser will know how to handle this, by auto closing the tag when it gets to the </tr> wrapping the cell with the missing closing </td> tag

Francois Over a year ago

Then there is no reason a inside à table data cell does not break line.

Alon Eitan Over a year ago

But the   tag is on the second cell, and it has a closing </td> tag

Francois Over a year ago

Yes, but still, some upper html code could break the rest. I've tested the table on chrome and the tag does work even if the <td> before isn't closed. So you're right, but it's the only thing I can see that could prevent it from working.

Alon Eitan Over a year ago

The reason is that ngBind (which is the equivalent of {{ expression }}) doesn't work with html entities: Reference The ngBind attribute tells Angular to replace the text content of the specified HTML element with the value of a given expression The OP is using PHP inside their controller - This is something i've never seen before... Making it pretty bad practice as a whole

|

Collectives™ on Stack Overflow

New lines not working in Javascript function when echoing in PHP

2 Answers 2

12 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

12 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related