3

Given that I have a string being displayed on the page in AngularDart.

... <strong>Notes: </strong> {{cmp.selectedStudent.notes}} ...

How can I make it display multi-line? In the string I have newline characters, I want them to be encoded as <br /> characters in the html output.

Phil
  • 46,436
  • 33
  • 110
  • 175

2 Answers2

3

You can replace the '\n' in your string with <br/> and use something like the proposed my-bind-html directive shown in my answer here How to add a component programatically in Angular.Dart? (the code might be a bit outdated due to a lot of recent changes in Angular)

You could use ng-repeat and repeat over your notes lines but first you need to split them by '\n' so you get an array of lines.

List<String> _notesList = null; 
List<String> get notesList { 
  if (_notesList==null) _notesList = notes.split("\n").toList(); return _notesList; 
}

.

<span ng-repeat="note in cmp.selectedStudent.notesList">{{note}}<br /></span>
Community
  • 1
  • 1
Günter Zöchbauer
  • 623,577
  • 216
  • 2,003
  • 1,567
  • Ok thanks a List is ok with ng-repeat. List _notesList = null; List get notesList { if (_notesList==null) _notesList = notes.split("\n").toList(); return _notesList; } {{note}}
     – Phil May 27 '14 at 10:09
1

By default, angular doesn't interpret HTML balise to avoid some unpredictible behavior or others bad thing, but you can disable this verification with

ng-bind-html

link to the official doc : NgHtmlBind

So you can replace directly the '\n' character by the 'br' html node.

So you can do :

// ...
String getHtmlBrNote() {
  return this.notes.replaceAll("\n", "<br />");
}
// ...

and after in angular

... <strong>Notes: </strong> <span ng-bind-html="cmp.selectedStudent.getHtmlBrNote()"></span> ...

And it will be ok

Vink
  • 1,267
  • 9
  • 13
  • ng-bind-html was not ported to Dart and also is not planned to be ported due to security reasons. The link in my Answer shows the code to build your own port of the ng-bind-html directive. – Günter Zöchbauer May 27 '14 at 12:14
  • I just see that in the AngularDart official doc [NgHtmlBind](https://docs.angulardart.org/#angular/angular-directive.NgBindHtml) and i have test my code in Dartium and it works. But maybe it's depreciated – Vink May 27 '14 at 12:18
  • Ok, I have to try that. It says it evaluates to a String, maybe it escapes all `<>&...`, but why would it need a NodeValidator for this. Maybe this has changed with the availability of custom NodeValidator a few weeks ago. – Günter Zöchbauer May 27 '14 at 12:29
  • I think it's because in the angular process, treatment of the NgHtmlBind is do after and if it doesn't a string, it can break the angular parser, or something like that. **but it's just a idea, i don't have check my self.** – Vink May 27 '14 at 12:50
  • Thanks for bringing it to my attention. There was a definitively a change since I last checked this directive. I will try it again, but probably not today. – Günter Zöchbauer May 27 '14 at 12:52
  • Wouldn't this be unsafe for other characters other than \n? – Phil May 27 '14 at 14:51
  • I'm not a expert in web security, but if you ONLY DISPLAY information, it should be safe. For the choose of the solution, in my point of view it really depend of what you want to do. for just put a 'br', ng-repeat will be perfect, but if you want apply a style that depend of the input, i think ng-bind-html will be fine. – Vink May 27 '14 at 14:59
  • As I understand, sometimes people put – Phil May 27 '14 at 15:05
  • Yes, it's why i have write "for display purpose only", if you just display information provide by your server, it will be fine, but if you send this information to your server, it will be bad, very bad – Vink May 27 '14 at 15:12