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 class="icon ion-checkmark"></i>' }}</span>
How would I render an actual HTML element in that case?
One way would be to use ngIf
For AngularJS:
<span ng-If="assessmentRequestValue">{{ assessmentRequestValue }}</span>
<span ng-If="!assessmentRequestValue"><i class="icon ion-checkmark"></i></span>
For Angular2+
<span *ngIf="assessmentRequestValue">{{ assessmentRequestValue }}</span>
<span *ngIf="!assessmentRequestValue"><i class="icon ion-checkmark"></i></span>
For both, Try not to use function calls in angular template expressions Use getScore(assessmentRequest) somewhere inside your controller to set assessmentRequestValue
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
EG
<span ng-bind-html="getScore(assessmentRequest) ? getScore(assessmentRequest) : '<i class="icon ion-checkmark"></i>' "></span>