Tengo una función getScore() que devuelve un número o nulo. Luego lo llamo dentro de mi archivo html así:
<span>{{ getScore(assessmentRequest) }}</span>Ahora quiero cambiarlo para que represente el número si se devuelve un número, o represente un ícono si devuelve un valor nulo. Intenté algo como esto, pero solo devuelve una cadena en lugar de un elemento HTML real:
<span>{{ getScore(assessmentRequest) ? getScore(assessmentRequest) : '<i class="icon ion-checkmark"></i>' }}</span>¿Cómo representaría un elemento HTML real en ese caso?
Una forma sería usar ngIf
Para AngularJS:
<span ng-If="assessmentRequestValue">{{ assessmentRequestValue }}</span> <span ng-If="!assessmentRequestValue"><i class="icon ion-checkmark"></i></span>Para Angular2+
<span *ngIf="assessmentRequestValue">{{ assessmentRequestValue }}</span> <span *ngIf="!assessmentRequestValue"><i class="icon ion-checkmark"></i></span>Para ambos, trate de no usar llamadas a funciones en expresiones de plantillas angulares . Use getScore (assessmentRequest) en algún lugar dentro de su controlador para establecer la evaluaciónRequestValue
¿Qué tal usar la directiva ng-bind-html ? Como se indica en los documentos originales
Evalúa la expresión e inserta el HTML resultante en el elemento de forma segura
P.EJ
<span ng-bind-html="getScore(assessmentRequest) ? getScore(assessmentRequest) : '<i class="icon ion-checkmark"></i>' "></span>