angularjs - 使用三元有条件地创建文本或删除文本

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
}]

这是渲染的第一行(其他类似)..

相反，我想将玩家的名字呈现为纯文本，或者如果他们没有站立，则将其删除。

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>

添加 .strikethrough 的 CSS 样式，一切顺利。

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

你可以看到它在这个笨蛋上工作:http://plnkr.co/edit/MYnXLwCC7XI1MrvcI5ti?p=preview