'AngularJS to display one section in Italic

Hi i'm creating a Harvard Reference Generator using AngularJS ive got it working perfectly, i can get it to create the full reference however i need one section to be styled in italics, the information is captured using a form. I require a little help with the output.

Current Output Code:

{{
book_author+" "+book_multiple_authors+" ("+book_year+"). 
"+book_title+".
 
"+book_place+":
 
"+book_publisher+".
 
"+ book_edition
}}.

What i need is for one section "book_title" to be shown in italics I have tried:

{{
book_author+" "+book_multiple_authors+" ("+book_year+"). 
<i>"+book_title+".</i>
&nbsp;
"+book_place+":
&nbsp;
"+book_publisher+".
&nbsp;
"+ book_edition
}}.

{{
book_author+"&nbsp;"+book_multiple_authors+"&nbsp;("+book_year+").&nbsp;
"+<i>book_title</i>+".
&nbsp;
"+book_place+":
&nbsp;
"+book_publisher+".
&nbsp;
"+ book_edition
}}.

{{
book_author+"&nbsp;"+book_multiple_authors+"&nbsp;("+book_year+").&nbsp;
"<i>+book_title+</i>".
&nbsp;
"+book_place+":
&nbsp;
"+book_publisher+".
&nbsp;
"+ book_edition
}}.

Nothing seems to work, i cant find any further reference to formatting the angularjs output specific to one section. What am i missing, any help would be greatly appreciated. That You.

angularjs


Solution 1:[1]

To have HTML rendered within ng expressions, you need to use ngSanitize or $sce dependency. Else, HTML will be rendered as string inside your expressions.

In your case, you can simplify it by breaking it down to multiple elements:

<span ng-bind="book_author"></span> 
<span ng-bind="book_multiple_authors"></span>
<span ng-bind="book_year"></span>

<i>
  <span ng-bind="book_title"></span>
</i>

<span ng-bind="book_place"></span>
<span ng-bind="book_publisher"></span>
<span ng-bind="book_edition"></span>

Solution 2:[2]

Code between double curly braces in AngularJS is meant to be JavaScript, so it can't contain HTML tags. The way around it would be along these lines:

{{book_author+"&nbsp;"+book_multiple_authors
+"&nbsp;("+book_year+").&nbsp";}}
<i>{{book_title}}</i>
{{"&nbsp;"+book_place+":&nbsp;"+book_publisher
+".&nbsp;"+book_edition;}}

Let me know if this works for you, if not we can try CSS instead to render text in italics.

Best wishes, Lukasz

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1
Solution 2 woocash

Related Questions