Question

我想为表格设计格式中的角度ng-repeat提供不同的背景颜色。如果play_id相同，我希望在tr标记中提供相同的背景颜色，或者另一种颜色tr标记。

{
    "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 code：

<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

您可以使用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：＆＃39; GREEN＆＃39;}，{12：＆＃39; YELLOW＆＃39;}]，每次你进入这个函数时，你如果ID不存在，则添加一个对象，并关联一个随机颜色。如果该ID已存在，则只返回CSS属性（如GREEN，fir play_ID 8）

Answer 2

编辑：好吧，Rouk更快;）

我建议使用ng-class并在ng-repeat标签中添加如下内容。

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

当然会创建合适的css类。

Answer 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个案例。希望它会帮助你

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

3 个答案: