Set HTML as default value of undefined variable in Angular JS

Question

I have a variable that could be potentially unset like this

{{salesperson || 'not set'}}

I want to add a CSS class to the not set area like this

{{salesperson || '<span class="error">- Not Set -</span>'}}

When I tried that it throws syntax errors.

score 6 · Accepted Answer · answered Dec 23 '15 at 20:44

6

HTML in expressions is escaped by angular, to avoid HTML/JS injections.

Use ng-class:

<span ng-class="{error: !salesperson}">{{salesperson || 'not set'}}</span>

Or simply ng-show/ng-hide:

<span ng-hide="salesperson" class="error">not set</span>
<span ng-show="salesperson">{{ salesperson }}</span>

answered Dec 23 '15 at 20:44

JB Nizet

This is good. You may need to use `ng-cloak` to prevent "not set" from flickering on the screen on load. – Dylan Watt Dec 23 '15 at 20:47

score 1 · Answer 2 · edited May 23 '17 at 11:52

So if you really, really want to inject HTML, look at this question: With ng-bind-html-unsafe removed, how do I inject HTML?

But if you just want to show an error if it's not defined:

{{salesperson}}<span ng-if="!salesperson" class="error ng-cloak">- Not Set -</span>'

It will only show the span if salesperson is undefined. Make sure to define your ng-cloak css as well to prevent any flickering.

2 Answers2