HTML code inside an angularjs expression

Question

Is it possible to render html codes inside an angularjs expression? Something like this code:

<!DOCTYPE html>
<html>
    <head>
        <title></title>
        <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    </head>
    <body ng-app="myApp">
        {{
            1+2 === 3 ? 
            '<span>Hello World!</span>' 
                : 
            "HI" 
        }}
    </body>
    <script>
    var app = angular.module('myApp', []); 
    </script>
</html>

Care to provide a code? Documentation seems to not answer clearly and precisely my question — Dean Christian Armada
– Dean Christian Armada, Commented Mar 10, 2016 at 8:29
Great, two answers suggest to use a different solution, and one comment by dirkk says it is easy and gives us a hint. In the end nobody gives the answer, which is what people come here for. — marczoid
– marczoid, Commented Apr 13, 2017 at 9:44

Luka Jacobowitz · Accepted Answer · 2016-03-10 08:50:16Z

2

I think there's definitely a better solution to this using ng-if. Having these huge angular expressions with HTML inside defeats the purpose in my opinion. What I'd do is something like this:

<body ng-app="myApp">
    <span ng-if="1 + 2 === 3">Hello World!</span>
    <p ng-if="1 + 2 !== 3">HI</p>
</body>

This a lot more readable to me.

answered Mar 10, 2016 at 8:50

Luka Jacobowitz

23.7k5 gold badges41 silver badges58 bronze badges

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

2 Comments

Dean Christian Armada Over a year ago

Oh ok seems like I really need to use that method I was hoping I can use something similar to Django's conditional template tags

Luka Jacobowitz Over a year ago

You could also use ngBindHtml docs.angularjs.org/api/ng/directive/ngBindHtml , but this solution seems a lot nicer if you ask me.

Ashish Bairagi · Accepted Answer · 2016-03-10 08:52:17Z

1

Expression are used for something to be parsed but for your required condition you can simply use ng-if like:

<body ng-app="myApp">
        <span ng-if="1+2 === 3">Hello World!</span> 
        <span ng-if="1+2 !== 3">HI</span>  
</body>

answered Mar 10, 2016 at 8:52

Ashish Bairagi

3822 silver badges15 bronze badges

1 Comment

Dean Christian Armada Over a year ago

Oh ok seems like I really need to use that method I was hoping I can use something similar to Django's conditional template tags

Collectives™ on Stack Overflow

HTML code inside an angularjs expression

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related