update row in angular table when td has multiple items

Question

I have a table that I'm displaying using angular.js. So, my one spot in the table holds two pieces of information. It has data and color. I found stuff for editing the data, but any suggestions on changing the color at the same time?

This is what my dataset looks like:

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

What my table looks like:

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

why node.js tag is used its pure client side problem. – Zeeshan Hassan Memon Feb 28 '16 at 15:32 — Zeeshan Hassan Memon, Feb 28 '16 at 15:32

score 0 · Answer 1 · edited May 23 '17 at 12:25

See snippet below:

Looking at your code, you need to have a properly formatted JSON (not the case at the moment) and in ng-class you need to make a comparison and not an assignment. (see difference between =, == and === in JS, see here and 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>

update row in angular table when td has multiple items

1 Answers1