AngularJS is rendering br as text not as a newline

Question

I am sure this has been asked before but I cannot find the answer   I have an AngularJS script that is pulling from a DB and then rendering to content   Everything is working correctly except a couple of places that I am trying to concatenate some words with new lines between them      in the script js   groupedList aIndex  CATEGORY   existingCategory   n  thisCategory  groupedList aIndex  CATEGORY   existingCategory   lt br gt   thisCategory    If I use the first line of the above code I don t see anything but there is not a new line in the redered html   If I use the second line the  lt br gt  get rendered as text and the output looks like this   Instinct lt br gt Media   instead of   Instinct Media   I can post the full script if that would be helpful but I am guessing there is something simple that I am just not seeing   UPDATE Here is the full js  function qCtrl  scope   filter   http   timeout         scope getCategories   function    http post  quote cfc method getCategories   success function data     scope categories   data               scope getClassifications   function    http post  quote cfc method getClassifications   success function data       scope classifications   data              scope getIndustries   function    http post  quote cfc method getIndustries   success function data     scope industries   data               scope getKeywords   function    http post  quote cfc method getKeywords   success function data     scope keywords   data             scope getSources   function    http post  quote cfc method getSources   success function data       scope sources   data               scope getAllQuotes   function    http post  quote cfc method getAllQuotesJoined   success function data     scope allQuotes   data                 scope initScopes   function              scope getCategories             scope getClassifications             scope getIndustries             scope getKeywords             scope getSources             scope getAllQuotes                  scope initScopes            SEARCH QUOTES      scope filteredQuotes    scope allQuotes       scope search    searchField            scope searchQuote   function            var filter    filter  filter            var searchCrit    scope search          var newlist    scope allQuotes          var groupedList               var idList               newlist   filter newlist  TESTQUOTE searchCrit searchField            for i 0 i lt 10 i                 aIndex   idList contains newlist i  TESTIMONIALID               if aIndex  gt   0                   thisKeyword   newlist i  KEYWORD                  thisClassification   newlist i  CLASSIFICATION                  thisCategory   newlist i  CATEGORY                  existingKeyword   groupedList aIndex  KEYWORD                  existingClassification   groupedList aIndex  CLASSIFICATION                  existingCategory   groupedList aIndex  CATEGORY                  if thisKeyword        amp  amp  existingKeyword indexOf thisKeyword     -1                       groupedList aIndex  KEYWORD   existingKeyword   -   thisKeyword                                     if thisClassification        amp  amp  existingClassification indexOf thisClassification     -1                       groupedList aIndex  CLASSIFICATION   existingClassification    n   thisClassification                                     if thisCategory        amp  amp  existingCategory indexOf thisCategory     -1                       groupedList aIndex  CATEGORY   existingCategory   lt br gt   thisCategory                                                 else                   idList push newlist i  TESTIMONIALID                   groupedList push newlist i                                     scope filteredQuotes   groupedList            Array prototype contains   function   needle        for  j in this           if  this j     needle  return j          return -1      Here is the HTML   lt div ng-repeat  q in filteredQuotes  class  well clearfix  gt                           lt h3 gt   q TITLE   lt  h3 gt                           lt div class  row-fluid  style  margin-bottom 5px   gt                               lt div class  span3 well-small whBG  gt  lt h4 gt Classification lt  h4 gt   q CLASSIFICATION   lt  div gt                               lt div class  span3 well-small whBG pipeHolder  gt  lt h4 gt Categories lt  h4 gt   q CATEGORY   lt  div gt                               lt div class  span3 well-small whBG  gt  lt h4 gt Key Words lt  h4 gt   q KEYWORD   lt  div gt                               lt div class  span3 well-small whBG  gt  lt h4 gt Additional lt  h4 gt Industry     q INDUSTRY   lt br gt Source     q SOURCE   lt  div gt                           lt  div gt                           lt div class  well whBG  gt   q TESTQUOTE   lt  div gt                           lt div class  tiny  gt                              Source comment     q SOURCECOMMENT   lt br gt                              Additional Comment     q COMMENT                            lt  div gt                       lt  div gt                   lt  div gt

User · Accepted Answer

I could be wrong because I ve never used Angular  but I believe you are probably using ng-bind  which will create just a TextNode   You will want to use ng-bind-html instead   http   docs angularjs org api ngSanitize directive ngBindHtml  Update  It looks like you ll need to use ng-bind-html-unsafe  q category   http   docs angularjs org api ng directive ngBindHtmlUnsafe  Here s a demo   http   jsfiddle net VFVMv

User · Answer

You can use  n to concatenate words and then apply this style to container div   style  white-space  pre     More info can be found at https   developer mozilla org en-US docs Web CSS white-space   x000D   x000D   lt p style  white-space  pre   gt  x000D      This is normal text  x000D   lt  p gt  x000D   lt p style  white-space  pre   gt  x000D      This  x000D    text  x000D    contains  x000D    new lines  x000D   lt  p gt  x000D   x000D   x000D

User · Answer

Why so complicated   I solved my problem this way simply      lt pre gt   existingCategory thisCategory   lt  pre gt    It will make  lt br   gt  automatically if the string contains   n  that contain when I was saving data from textarea

User · Answer

You need to either use ng-bind-html-unsafe     or you need to include the ngSanitize module and use ng-bind-html   with ng-bind-html-unsafe  Use this if you trust the source of the HTML you re rendering it will render the raw output of whatever you put into it    lt div gt  lt h4 gt Categories lt  h4 gt  lt span ng-bind-html-unsafe  q CATEGORY  gt  lt  span gt  lt  div gt      OR with ng-bind-html  Use this if you DON T trust the source of the HTML  i e  it s user input   It will sanitize the html to make sure it doesn t include things like script tags or other sources of potential security risks   Make sure you include this    lt script src  http   code angularjs org 1 0 4 angular-sanitize min js  gt  lt  script gt    Then reference it in your application module   var app   angular module  myApp     ngSanitize       THEN use it    lt div gt  lt h4 gt Categories lt  h4 gt  lt span ng-bind-html  q CATEGORY  gt  lt  span gt  lt  div gt

User · Answer

I ve used like this  function chatSearchCtrl  scope   http  sce        some more my code     take this  data  message      sce trustAsHtml data  message       scope searchresults   data    and in html I did   lt p class  clsPyType clsChatBoxPadding  ng-bind-html  searchresults message  gt  lt  p gt    thats it I get my  lt br  gt  tag rendered

[javascript] AngularJS is rendering <br> as text not as a newline

Examples related to javascript

Examples related to angularjs