javascript - 如何使用 AngularJS 添加不同的背景颜色

Question

我想为表格设计格式中的 Angular ng-repeat 提供不同的背景颜色。如果 play_id 相同，我想在 tr 标签中提供相同的背景颜色，否则另一种颜色 tr 标签。

JSON ( https://jsfiddle.net/0sasz78n/ )

{
    "play_details": [
        {
            "play_id": "15",
            "quest_id": "63",
            "question": "What will be the match result ?"
        },
        {
            "play_id": "8",
            "quest_id": "61",
            "question": "Which of this batswan will score higher ?"
        },
        {
            "play_id": "8",
            "quest_id": "59",
            "question": "What will be the match result ?"
        }
    ]
}

HTML代码:

<table><tr ng-repeat="single_Play in all_Play_details">
    <td>{{$index + 1}}</td>
    <td>{{single_Play.play_id}}</td>
    <td>{{single_Play.quest_id}}</td>
    <td>{{single_Play.question}}</td>
</tr></table>

JS代码:

$scope.all_Play_details = response.data.play_details;

Answer 1

编辑:好的，Rouk 更快；)

我建议使用 ng-class 并在你的 ng-repeat 标签中添加类似下面的内容。

ng-class="{'highlightedCell' : play_details.play_id == currentID, 'diffentColoredCell' : play_details.play_id != currentID"}

当然还要创建适当的 css 类。