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.

JB Nizet · Accepted Answer · 2015-12-23 20:44:39Z

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, 2015 at 20:44

JB Nizet

694k94 gold badges1.3k silver badges1.3k bronze badges

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

1 Comment

This is good. You may need to use ng-cloak to prevent "not set" from flickering on the screen on load.

Community · Accepted Answer · 2017-05-23 11:52:00Z

1

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.

CommunityBot

11 silver badge

answered Dec 23, 2015 at 20:46

Dylan Watt

3,38715 silver badges17 bronze badges