Html forms: Output string variables with line break with angular js

Camunda 7 Topics Discussion & Questions
1

Hi,
I want to show the contact data of a person like this in my html form
grafik

I write the data in my ejb like this:

    String test1 = "Erste Zeile <br> zweite Zeile";
	String test2 = "Erste Zeile <br /> zweite Zeile";
	String test3 = "Erste Zeile \n zweite Zeile";

     delegateExecution.setVariable("test1", test1);
	delegateExecution.setVariable("test2", test2);
	delegateExecution.setVariable("test3", test3);

So I am able to show them in my html form with angular:

<form role="form">
  <script cam-script type="text/form-script">
    inject(['$scope', '$http', function($scope, $http) {
    var variableManager = camForm.variableManager;

    camForm.on('form-loaded', function() {

    variableManager.fetchVariable('test1'); 
    variableManager.fetchVariable('test2'); 
    variableManager.fetchVariable('test3'); 
    });

    camForm.on('variables-fetched', function() {
     
      $scope.studentContactData = variableManager.variable('studentContactData').value;

      $scope.test1 = variableManager.variable('test1').value;
      $scope.test2 = variableManager.variable('test2').value;
      $scope.test3 = variableManager.variable('test3').value;

    });
}]);

  </script>

         <h1>Test 1 {{ test1 }}</h1>
           <h1>Test 2 {{ test2 }}</h1>
          <h1>Test 3 {{ test3 }}</h1>
</form>

But the output is always like this:

grafik
grafik741×257 11.6 KB

Any ideas how I can make a line break without writing a seperate variable for every line?

thanks a lot,
Nicole

2

To honor the \n character as a line break use the pre tag or apply a stylesheet class:

<pre>{{ test3 }}</pre>

<div style="white-space: pre-wrap">{{ test3 }}</div>
3

Hi,
thanks. 

 works perfect with line breaks. What can I do with other html tags like <a href=""…>?


grafik


Thanks a lot!
4

Hi Nicole,

don’t know how how HTML elements can be used with Angular JS.
But perhaps the following will help you or any other forum user to provide a solution.

I’m using Java Server Faces (JSF) for my web app. HTML get’s generated on server side.
Putting your given text’s into an string array

        this.model.setTest( new ArrayList<>() );
        this.model.getTest().add( "Erste Zeile <br> zweite Zeile" );
        this.model.getTest().add( "Erste Zeile <br/> zweite Zeile" );

and print them out in two different ways (escape = true / false):

                    <h:outputText escape="true" value="#{t}"/><br/>
                    <h:outputText escape="false" value="#{t}"/><br/>

gives this output:

Erste Zeile <br> zweite Zeile
Erste Zeile
zweite Zeile
Erste Zeile <br/> zweite Zeile
Erste Zeile
zweite Zeile

Escape=true is the standard, with that html relevant characters like < and > get replaced by &lt; and &gt;. So the characters < and > are shown in rendered html.
With escape = false the characters < and > get part of the html source code and interpreted by the browser which leads to a line break in this case.
If you’re using <br> or <br /> doesn’t matter.

5