使用三元

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

這是呈現第一行（其它的是similiar）..

相反，我想渲染玩家如果它們不是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; 
} 

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

Answer 2

嘗試NG出現NG-重複

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>