выделить данные таблицы на основе значений победителя, полученных из JSON

Я анализирую данные JSON и отображаю данные в таблице, используя angular JS.

Есть много строк таблицы, которые я заполнил из файла JSON, используя ng-repeat.

Status.winner может принимать значения 0 или 1.

Если значение победителя для строки таблицы равно 0, я хотел бы выделить Playerdata[0].playername для этой строки таблицы желтым цветом.

Иначе Если победителем для строки таблицы является 1, я хотел бы выделить 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; 
  });   
})

json css angularjs ng-bind ng-repeat
person user21    schedule 23.01.2016    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Используйте нгкласс:

<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 стили класса так, как вам нужно. Например:

.winner {
    background-color: yellow;
}
person dfsq    schedule 23.01.2016
comment
Круто, рад, что помогло! - person dfsq; 23.01.2016
comment
Я думал, что это работает, но на самом деле он выделяет всю строку, а для записи, где победитель не 1, были выделены значения данных игрока [1] и данных [0]. Есть ли способ выделить только td для победителя? - person user21; 23.01.2016
comment
Вы делаете что-то не так, должно работать plnkr.co/edit/4gN3qFvcX8VYRsmQ5jzm?p=preview - person dfsq; 23.01.2016
comment
Ох, ну ладно. Я по ошибке поставил ng-класс на тр. Спасибо. - person user21; 23.01.2016
comment
Привет, не могли бы вы помочь мне, если вы не возражаете, у меня есть дополнительный вопрос. Знаете ли вы, как изменить код символа в таблице html на имя символа на основе объекта $scope.character, который добавляется в plunk app.js?. Например, для персонажа игрока в строке таблицы 1 хотелось бы изменить слово с 4 на Luna, 6 на Harland. Я действительно новичок в angularJS и изучаю его. plnkr.co/edit/izUO1W6g8vUGRB6ILV3k?p=preview - person user21; 23.01.2016
comment
$scope.character структура для этого не очень удобна. Можете ли вы изменить его структуру или она исправлена? - person dfsq; 23.01.2016