我从网格中获取了这段HTML代码。我需要为得分值上的每一行显示不同的颜色,好像它从0到4它将是绿色,从5到7黄色和从8到10红色。
我打算改变" tableColor"变量值:{success,warning,danger}取决于分数。我只是不知道如何使用compoundThread
指令
ng-repeat
如果有人知道该怎么做,我将不胜感激!
答案 0 :(得分:1)
试试这个
<tbody>
<tr ng-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>
<tr ng-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>
<tr ng-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; }
答案 1 :(得分:1)
您的代码非常完美。您只需要更改类“tableColor”的值。请在您的js文件中执行以下代码:
getWindow().addFlags(WindowManager.LayoutParams.FLAG_KEEP_SCREEN_ON |
WindowManager.LayoutParams.FLAG_SHOW_WHEN_LOCKED |
WindowManager.LayoutParams.FLAG_FULLSCREEN);
getWindow().addFlags(WindowManager.LayoutParams.FLAG_SHOW_WHEN_LOCKED
| WindowManager.LayoutParams.FLAG_FULLSCREEN
| WindowManager.LayoutParams.FLAG_DIM_BEHIND);
并且在html中这个{{tableColor}}会影响到它。
$scope.score = 4 // any dynamic value you can set. i think you already have.
if($scope.score <= 4)
{
$scope.tableColor = "classGreen";
}
else if($scope.score >= 5 && $scope.score <= 7)
{
$scope.tableColor = "classYellow";
}
else if($scope.score >= 8 && $scope.score <= 10)
{
$scope.tableColor = "classRed";
}
答案 2 :(得分:0)
试试这个
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}];
});
&#13;
.success{
color:green;
}
.warning{
color:yellow;
}
.danger{
color:red;
}
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl" class="panel-group" id="accordion">
<table>
<tr ng-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>
&#13;