有条件地使用三元文本创建文本或通过文本标记

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>

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

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

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

Answer 2

对于Angular 7，您可以使用ngClass来添加或删除HTML元素上的css类。

.html

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

.css

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

详细了解ngClass here

Answer 3

在ng-repeat中尝试ng-show

http://jsfiddle.net/z3gg667h/1/

<tr ng-repeat="player in players">
    <td ng-cloak>
     <span ng-show="player.standing"> 
    {{player.name}}
     </span>
     <span ng-show="!player.standing">
      <strike>{{ player.name}}</strike>
     </span></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>