使用三元条件创建文本或删除文本

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>

数据集..

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

这是渲染的第一行（其他类似）。

相反，我想将播放器的名称渲染为纯文本，否则将其删除standing。

Answer 1

您需要为此使用ng-class。用Angular编写三元数有两种方法。

1.1.5之前的版本

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

1.1.5版及更高版本：

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

添加CSS样式.strikethrough，一切都很好。

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

您可以看到它在此插件上运行：http ://plnkr.co/edit/MYnXLwCC7XI1MrvcI5ti?p=preview