0

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?

Daath
  • 1,899
  • 7
  • 26
  • 42

2 Answers2

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.

Community
  • 1
  • 1
Harris
  • 1,775
  • 16
  • 19
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

Daath
  • 1,899
  • 7
  • 26
  • 42