角度とngリピートの指示

Question

私はグリッドからこのHTMLコードを持っています。私は0から4までの値が緑色、5から7の黄色、8から10の赤のように、スコア値に依存しない各行の異なる色を表示する必要があります。

スコアに応じて、「tableColor」変数を{success、warning、danger}の値に変更する予定です。私はちょうど誰かがそれを行う方法を知っている場合、私はそれを感謝ng-repeatディレクティブ

<tbody> 
    <tr class="{{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> 

であることを行う方法を知ってはいけません！

Answer 1

ソリューションを約束し、この

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

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

Answer 2

はCSS FORこの

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

をお試しください：

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

Answer 3

あなたのコードは完璧です。クラス "tableColor"の値を変更するだけです。 jsファイルの次のコードを実行してください：

$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"; 
} 

ここでは{{tableColor}}が影響を与えます。

<tbody> 
    <tr class="{{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>