AngularJS - How do I add an HTML element through a handlebar ternary operation?

Question

Note: By "handlebars" I don't mean Handlebars.js, I just mean the double curly braces.

I have a table, and in one of the columns I want to display the data, and an additional HTML element depending on the outcome of the ternary operation.

Here is my code for the td

<td>{{item.ProjectNumber}}{{item.DateSubmitted.toString().length > 0 ? null : <span class="error">Incomplete</span>}}</td>

If I don't try to make it an element (rather just display 'Incomplete'), it works fine. But when I do try to add that span, that whole piece of code is added to the td.

So how can I create an HTML element inside of the handlebars?

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

2

Just make the element and optionally hide it with ng-show.

<span class="error" ng-show="item.DateSubmitted.toString()">Incomplete</span>

I would typically reserve using curly braces for providing data, not making decisions. If you absolutely must create the element inline like that, you'll need to tell your application to trust the HTML, as described in this SE question.

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Dec 30, 2015 at 19:14

Harris

1,78516 silver badges19 bronze badges

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

Comments

Daath · Accepted Answer · 2015-12-30 15:47:33Z

0

Okay so I came up with a different way of doing it.

<td>{{factsheet.ProjectNumber}}<span class="{{factsheet.DateSubmitted.toString().length > 0 ? 'hide-error' : 'error'}}">Incomplete</span></td>

I just made the span and put the ternary logic in the class attribute where the class .hide-error is display:none

answered Dec 30, 2015 at 15:47

Daath

1,9797 gold badges28 silver badges43 bronze badges

1 Comment

moonwave99 Over a year ago

You should better go the way Harris Weinstein described in his answer.

Collectives™ on Stack Overflow

AngularJS - How do I add an HTML element through a handlebar ternary operation?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related