如何使用AngularJS添加不同的背景颜色答案

【问题标题】：How to add different background colour using AngularJS如何使用AngularJS添加不同的背景颜色
【发布时间】：2017-01-02 19:21:10
【问题描述】：

我想为表格设计格式中的角度 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;

【问题讨论】：

您的jsfiddle 链接没有任何内容。
{"play_details":[{"play_id":"8","quest_id":"61","question":"哪个蝙蝠侠得分更高？"},{"play_id ":"8","quest_id":"59","question":"比赛结果是什么？"}]}
这是json格式
您可以使用ng-style/ng-class，但在此之前，请在数组的每个元素中包含backgroundColor 属性
play_id会随机变化，那么如何提供ng-class

标签： javascript jquery html css angularjs

【解决方案1】：

编辑：好的，Rouk 更快；）

我建议使用 ng-class 并将以下内容添加到您的 ng-repeat 标记中。

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

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

【讨论】：

【解决方案2】：

您可以为此使用 ng-class。 https://docs.angularjs.org/api/ng/directive/ngClass

只需创建一些具有不同背景颜色的类，然后在 ng-class 中添加条件。

table><tr ng-repeat="single_Play in all_Play_details" ng-class="{'YOURCSSCLASS': single_Play.play_id == 8}>
...
 </tr></table>

类似的东西应该可以。

为了真正满足您的需求（每个 ID 具有相同的背景颜色），您还可以将一个函数传递给 ng-class。在这个函数中，添加一些逻辑并返回好的 CSS 类。（逻辑可能是添加一个对象范围数组，例如 [{8: 'GREEN'}, {12: 'YELLOW'}] 并且每次进入此函数时，如果 ID 不存在，则添加一个对象，并且你关联一个随机颜色。如果ID已经存在，你只需返回CSS属性（如GREEN，fir play_ID 8）

【讨论】：

你能告诉我如何添加那个条件
主要的play_id随机变化，那么如何静态提供play_id == 8
是的，这是一个例子。如果 play_id 随机变化并且不在一个范围内，您可以按照 Pankaj Parkar 的建议将 background-color 属性添加到您的 JSON。
但是，如果我能给出我的意见，根据随机 ID 设置背景颜色有点奇怪。
是否可以这样写 ng-class="{'YOURCSSCLASS': single_Play.play_id =='next_play_id'} 如何得到这个'next_play_id'

【解决方案3】：

就这样吧：

 <table>
   <tr ng-repeat="single_Play in all_Play_details">
     <td>{{$index + 1}}</td>
     <td ng-class="{'background-color: yellow':single_Play.quest_id === 2 || single_Play.quest_id === 3 ,'background-color: red':single_Play.quest_id === 4}">{{single_Play.play_id}}</td>
     <td>{{single_Play.quest_id}}</td>
     <td>{{single_Play.question}}</td>
   </tr>
 </table>

这样你可以写ng-class case。希望对你有帮助

【讨论】：