Conditionally create either text or striked through text using ternary

Question

html ..

<tr ng-repeat="player in players">
    <td ng-cloak>{{ player.standing ? player.name : '<strike>' + player.name + '</strike>' }}</td>
    <td ng-cloak>{{ player.associatedNumber }}</td>
    <td ng-cloak>
        <span ng-class="player.standing === true ? 'label label-success': 'label label-danger'">{{ player.standing }}</span>
    </td>
</tr>

Dataset ..

[{
    "name": "Robert C",
    "associatedNumber": 21,
    "standing": true
}, {
    "name": "Joey C",
    "associatedNumber": 55,
    "standing": true
}, {
    "name": "Bobby A",
    "associatedNumber": 15,
    "standing": true
}]

This is the first row rendered (others are similiar) ..

Instead I want to render either the player's name as plain text or striked through if they're not standing.

Answer 1

You need to use ng-class for this. There are two ways of writing a ternary in Angular.

Prior to version 1.1.5

<td ng-cloak data-ng-class="player.standing ? 'null' : 'strikethrough'">{{ player.name }}</td>

Version 1.1.5 and later:

<td ng-cloak data-ng-class="player.standing && 'null' || 'strikethrough'">{{ player.name }}</td>

Add the CSS style for .strikethrough and everything is good to go.

.strikethrough {
  text-decoration: line-through;
}

You can see it working at this plunker: http://plnkr.co/edit/MYnXLwCC7XI1MrvcI5ti?p=preview

Answer 2

For Angular 7 you can use ngClass which adds or removes css classes on HTML elements.

.html

<td [ngClass]="player.standing ? 'null' : 'strikethrough'"> {{ player.name }} </td>

.css

.strikethrough {
    text-decoration: line-through;
}

Read more on ngClass here