Question

我有一个表格，我正在使用angular.js显示。所以，table中的一个位置包含两条信息。它有数据和颜色。我找到了用于编辑数据的内容，但是有关同时更改颜色的任何建议？

这就是我的数据集：

var datalist =   [{scenario:"1", M1_date = '08/01/16', M1_color = 'green'},{scenario:"2", M1_date = '08/15/16', M1_color = 'red'}]

我的表格如下：

<td>{{ x.scenario }}</td>
<td ng-class="{'success':M1_color = 'onTarget' , 'info' : M1_color = 'closed', 'warning' : M1_color = 'targetrisk','info' : M1_color = 'missed'}">{{ x.M1_date }} </td>

Answer 1

请参阅下面的代码段：

查看您的代码，您需要拥有格式正确的JSON（目前不是这种情况），而在ng-class中您需要进行比较而不是分配。（请参阅JS中的=，==和===之间的区别，请参阅here和here）。

＆＃13;

var app = angular.module('myApp', []);

app.controller('mainCtrl',['$scope' , function($scope) {

  $scope.values = [
    {scenario:"1", M1_date: '08/01/16', M1_color : 'green'},
    {scenario:"2", M1_date: '08/15/16', M1_color: 'red'}
  ];
  
}]);

＆＃13;

 <style>
  .success{
    background-color: green;
  }

  .warning{
    background-color: red;
  }
</style>

<div ng-app="myApp" ng-controller="mainCtrl">
 <table>
  <tbody>
    <tr ng-repeat="x in values">
      <td>{{x.scenario }}</td>
      <td>{{x.M1_color}}</td>             <!-- shows `M1_color` attribute -->
      <td>{{x.M1_color === 'green'}}</td> <!-- example of a comparison with `M1_color` attribute -->
      <td ng-class="{'success': x.M1_color === 'green', 'warning': x.M1_color === 'red' }">{{ x.M1_date }} </td> <!-- using result of previous column to assign class depending on value of `M1_color` -->
    </tr>
  </tbody>
</table>
   </div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

＆＃13;

当td有多个项目时，更新角度表中的行

1 个答案: