當td有多個項目時在角度表中更新行

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

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>