Angular And Ng-repeat Directive

I have this piece of HTML code from a grid. I need to display different colors for each row deppending on the score value as if its from 0 to 4 it'll be green, from 5 to 7 yellow a

Solution 1:

Try this

<tbody><trng-if="{{firm.Score <= 4}} "class="green"ng-repeat="firm in device.firmwares"><td>{{firm.fileName}}</td><td>{{firm.extracted}}</td><td>{{firm.Score}}</td><td>{{firm.date}}</td></tr><trng-if="{{firm.Score >=5 & <=7 }} class="yellow" " ng-repeat="firm in device.firmwares"><td>{{firm.fileName}}</td><td>{{firm.extracted}}</td><td>{{firm.Score}}</td><td>{{firm.date}}</td></tr><trng-if="{{firm.Score >=8 & <=10 }}"class="red"ng-repeat="firm in device.firmwares"><td>{{firm.fileName}}</td><td>{{firm.extracted}}</td><td>{{firm.Score}}</td><td>{{firm.date}}</td></tr></tbody>

FOR CSS:

.red { background-color: red; }
.yellow { background-color: yellow; }
.green{ background-color: green; }

Solution 2:

Your code is perfect. You just need to change value of class "tableColor". Please do following code in your js file :

$scope.score = 4// any dynamic value you can set. i think you already have.if($scope.score <= 4)
{
   $scope.tableColor = "classGreen";
}
elseif($scope.score >= 5 && $scope.score <= 7)
{
   $scope.tableColor = "classYellow";
}
elseif($scope.score >= 8 && $scope.score <= 10)
{
   $scope.tableColor = "classRed";
}

and here in html this {{tableColor}} will affect that.

<tbody><trclass="{{tableColor}}"ng-repeat="firm in device.firmwares"><td>{{firm.fileName}}</td><td>{{firm.extracted}}</td><td>{{firm.Score}}</td><td>{{firm.date}}</td></tr></tbody>

Solution 3:

try this

var app = angular.module("app",[]);

app.controller("ctrl" , function($scope){
  $scope.items = [{"name":"ali","score":2},{"name":"reza","score":4},{"name":"amir","score":5},{"name":"amir","score":7},{"name":"amir","score":5},{"name":"asd","score":10},{"name":"jim","score":8},{"name":"babak","score":6},{"name":"vfrt","score":8},{"name":"cdsa","score":7},{"name":"amir","score":10},{"name":"majid","score":3}];
  
  
  });

.success{
  color:green;
  }

.warning{
   color:yellow;
  }

.danger{
  color:red;
  }

<scriptsrc="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script><divng-app="app"ng-controller="ctrl"class="panel-group"id="accordion"><table><trng-repeat="item in items"ng-class="{'success': item.score<= 4,'warning' :5<= item.score,'danger' : 8<=item.score }"><td>{{item.name}}</td><td>{{item.score}}</td></tr></table></div>