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>

Answer 1

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>