How to render either a number or a HTML element depending on what a function returns?-CodePudding

I have a function getScore() which either returns a number or null. Then I call it inside my html file like this:

<span>{{ getScore(assessmentRequest) }}</span>

Now I want to change it so that I render the number if a number is returned, or render an icon if it returns null. I tried something like this, but it just returns a string instead of an actual HTML element:

<span>{{ getScore(assessmentRequest) ? getScore(assessmentRequest) : '<i ></i>' }}</span>

How would I render an actual HTML element in that case?

CodePudding user response：

One way would be to use ngIf

For AngularJS:

ng-if

<span ng-If="assessmentRequestValue">{{ assessmentRequestValue }}</span>
<span ng-If="!assessmentRequestValue"><i ></i></span>

For Angular2

NgIf

<span *ngIf="assessmentRequestValue">{{ assessmentRequestValue }}</span>
<span *ngIf="!assessmentRequestValue"><i ></i></span>

For both, Try not to use function calls in angular template expressions Use getScore(assessmentRequest) somewhere inside your controller to set assessmentRequestValue

CodePudding user response：

How about using ng-bind-html directive. As stated in original docs

Evaluates the expression and inserts the resulting HTML into the element in a secure way

<span ng-bind-html="getScore(assessmentRequest) ? getScore(assessmentRequest) : '<i ></i>' "></span>