角和NG重复指令 [英] Angular and ng-repeat directive

问题描述

我有这一块HTML code从一个网格。我需要为每一行deppending的得分值显示不同的颜色，仿佛是从0到4，它会是绿色的，5至7黄，8至10个红色。

我打算改变tableColor变量值：视得分{成功，警告，危险}。我只是不知道该怎么做的 NG-重复指令

 ＆LT;＆TBODY GT;
     ＆LT; TR类={{tableColor}}NG重复=商行device.firmwares＆GT;
             ＆所述; TD＆GT; {{firm.fileName}}＆下; / TD＆GT;
             ＆所述; TD＆GT; {{firm.extracted}}＆下; / TD＆GT;
             ＆所述; TD＆GT; {{firm.Score}}＆下; / TD＆GT;
             ＆所述; TD＆GT; {{firm.date}}＆下; / TD＆GT;
      ＆LT; / TR＆GT;
＆LT; / TBODY＆GT;
 

如果有人知道如何做到这一点，我会AP preciate呢！

解决方案

试试这个

\r

\r

VAR应用= angular.module（应用程序，[]）;\r
\r
app.controller（CTRL功能（$范围）{\r
  $ 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}];\r
  \r
  \r
  }）;

\r

.success {\r
  颜色：绿色;\r
  }\r
\r
。警告{\r
   颜色：黄色;\r
  }\r
\r
。危险{\r
  颜色：红色;\r
  }

\r

＆LT;脚本SRC =htt​​ps://ajax.googleapis.com/ajax /libs/angularjs/1.2.23/angular.min.js\"></script>\r
＆LT; D​​IV NG-应用=应用程序NG控制器=CTRL级=面板组ID =手风琴＆GT;\r
  \r
  ＆LT;表＆gt;\r
     ＆LT; TR NG重复=项中的项目NG-CLASS ={'成功'：item.score＆LT; = 4，警告：5℃= item.score，危险：8示= item.score }＆GT;\r
             ＆所述; TD＆GT; {{item.name}}＆下; / TD＆GT;\r
             ＆所述; TD＆GT; {{item.score}}＆下; / TD＆GT;\r
      ＆LT; / TR＆GT;\r
＆LT; /表＆gt;\r
            \r
＆LT; / DIV＆GT;

\r

\r

\r

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 and from 8 to 10 red.

I plan to change the "tableColor" variable to the values: {success,warning,danger} depending on the score. I just dont know how to do that with the ng-repeat directive

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

If someone knows how to do it, I would appreciate it!

解决方案

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

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

这篇关于角和NG重复指令的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！