根据从 JSON 获得的获胜者价值突出显示 table 数据

Question

我正在解析 JSON 数据并使用 angular JS 将数据显示到 table。

我使用 ng-repeat.

从 JSON 文件填充了许多 table 行

Status.winner 可以是值 0 或 1。

如果 table 行的获胜者值为 0，我想将 table 行的 Playerdata[0].playername 突出显示为黄色。

否则如果 table 行的获胜者是 1，那么我想将 table 行的 Playerdata[1].playername 突出显示为黄色。

如何为具有不同获胜者值（可以是 0 或 1）的每一行执行此操作？

<body ng-app="form-input" ng-controller="ctrl">
<table class="table table-bordered table-condensed ">
  <caption>Recent Game Statistic</caption>
  <tbody> 
  <tr class="success"  ng-repeat="status in recentGame">      
    <td ng-bind="status.Winner"> </td> 
    <td ng-bind="status.Playerdata[0].Playername"> </td> 
    <td ng-bind="status.Playerdata[1].Playername"> </td> 
  </tr>

var app2 = angular.module('form-input', []);

app2.controller('ctrl', function($scope,$http) { 

var url = "http://...JSON";

$http.get(url).success( function(data) { 
  $scope.recentGame = data.RecentGames; 
  });   
})

Answer 1

使用 ngClass:

<tr class="success" ng-repeat="status in recentGame">      
    <td ng-bind="status.Winner"></td> 
    <td ng-bind="status.Playerdata[0].Playername" ng-class="{winner: status.Winner == 0}"></td> 
    <td ng-bind="status.Playerdata[1].Playername" ng-class="{winner: status.Winner == 1}"></td> 
</tr>

然后在 CSS 中定义 .winner class 所需的样式。例如：

.winner {
    background-color: yellow;
}

根据从 JSON 获得的获胜者价值突出显示 table 数据

highlight table data based on winner values obtained from JSON

css

json

angularjs

ng-repeat

ng-bind