如何在AngularJS中动态更改表格单元格颜色

用户名

我有一个视图，在这里我使用ng-repeat来为表内容填充动态数据。这是代码段-

    <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>

但是表的输出没有改变。每次回应我都会得到相同的颜色。我实际上如何改变颜色？您可以在此Image中看到输出。同样，存在的颜色甚至不会提供给响应。

我该如何解决？

宫殿

您将需要使用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>

演示：

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>

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。