Как динамически изменить цвет ячейки таблицы в AngularJS

Question

У меня есть представление, где я использую ng-repeat, чтобы заполнить содержимое таблицы динамическими c данными. Вот фрагмент кода -

    <tr ng-repeat="x in response">
        <td>{{x.property1}}</td>
        <td>{{x.property2}}</td>
        <td bgcolor="x.color1">{{x.property3}}</td>
        <td bgcolor="x.color2">{{x.property4}}</td>
    </tr>

Но вывод таблицы не меняется. Я получаю один и тот же цвет для каждого ответа. Как мне на самом деле изменить цвет? Вы можете увидеть результат в этом Изображение . Кроме того, присутствующий цвет даже не передается в ответ.

Как мне решить эту проблему?

Answer 1

Для этого вам понадобится директива ng-style, например:

<tr ng-repeat="x in response">
    <td>{{x.property1}}</td>
    <td>{{x.property2}}</td>
    <td ng-style="{'background-color': x.color1}">{{x.property3}}</td>
    <td ng-style="{'background-color': x.color2}">{{x.property4}}</td>
</tr>

DEMO:

var app = angular.module('app', []);

app.controller('tableController', function($scope) {
  $scope.response = [{
      property1: 'Jill',
      property2: 'Smith',
      color1: 'red',
      color2: 'green'
    },
    {
      property1: 'John',
      property2: 'Doe',
      color1: 'yellow',
      color2: '#336699'
    },
  ];
});

table, td {
  border: 1px solid black;
  border-collapse: collapse;
}
td {padding: 10px; min-width:120px;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<table ng-controller="tableController" ng-app="app">
  <tr ng-repeat="x in response">
    <td ng-style="{'background-color': x.color1}">{{x.property1}}</td>
    <td ng-style="{'background-color': x.color2}">{{x.property2}}</td>
  </tr>
</table>

Answer 2

Используйте ng-style для изменения цвета фона, с этим вы можете связать любой стиль css. пожалуйста, найдите документацию здесь: https://docs.angularjs.org/api/ng/directive/ngStyle

<tr ng-repeat="x in response">
  <td>{{x.property1}}</td>
  <td>{{x.property2}}</td>
  <td ng-style="{'background-color': x.color1}">{{x.property3}}</td>
  <td ng-style="{'background-color': x.color2}">{{x.property4}}</td>
</tr>

Ниже приведен пример того, как вы можете использовать ng-style для динамической установки стилей.

var app = angular.module('app', []);

app.controller('ctrl', function($scope) {
  $scope.myName = {
    name: 'Dummy name',
    color1: 'white',
    color2: 'tomato',
  };
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>

<div ng-controller="ctrl" ng-app="app">
  <p ng-style="{'background-color': myName.color2, 'color': myName.color1}">
  {{ myName.name }}
  </p>
</div>