javascript - 当 td 有多个项目时更新 Angular 表中的行

Question

我有一个使用 angular.js 显示的表格。因此，我在表中的一个位置包含两条信息。它有数据和颜色。我找到了用于编辑数据的东西，但是对于同时更改颜色有什么建议吗？

这就是我的数据集的样子:

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

我的 table 是什么样的:

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

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'}
  ];
  
}]);

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