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

update row in angular table when td has multiple items

本文关键字：更新 TD 项目      更新时间：2023-09-26

我有一个使用角度.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>

请参阅下面的代码片段：

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

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>

相关文章：