Angularjs 遍历出表格，给不同的行指定不同的背景色

需求是对一个不固定行列数的表格。请求多个数组组数据，每组数据都有不同的行列数据，根据不同数组的的行列数据，渲染不同的背景颜色

说了个寂寞吧，，，是用ui-grid还是用table标签然后ng-repeat，起码说个规范吧

给每个数组数据加个标识，判断赋值不同的class或者style.比如

let arr=[{id:1,name:"55",type:1}];
let arr2=[{id:1,name:"55",type:2}];

然后根据type 

for(var i=0;i<arr.length;i++){
  if(type==1){
    class="type1"
  }else{

   class=type2
  }
}


.type1{
 background:"red"
}

我用的是ng-style

这样只能return 一个数组里的数据，如果要是多个数组，就没办法了，

我大致写了一个测试demo，你看是不是这样，根据数据的name字段控制背景颜色

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/angular.min.js"></script>
    <title>angularjs练习</title>
    <style>
        .red{
            background-color: red;
        }
        .yellow{
            background-color: yellow;
        }
        .green{
            background-color: green;
        }
    </style>
</head>
<body ng-app="myApp" ng-controller="myController">
    <table>
        <tbody>
            <tr ng-repeat="entity in list track by $index" 
            ng-class="{'red':(entity.name == '张三'), 'yellow':(entity.name == '李四'), 'green':(entity.name == '赵五')}">
                <td>{{entity.name}}</td>
                <td>{{entity.math}}</td>
                <td>{{entity.chinese}}</td>
            </tr>
        </tbody>
    </table>

</body>

<script>
//建立模块
		//第一个参数是自定义的模块名，第二个参数是引用的模块名
		var app = angular.module("myApp", []);
		//创建控制器
		app.controller("myController", function($scope){
			
			$scope.list = [
				{name:'张三', math:99, chinese:88},
				{name:'李四', math:17, chinese:46},
				{name:'赵五', math:60, chinese:60}
			];

		});
</script>
</html>

您好，我是有问必答小助手，你的问题已经有小伙伴为您解答了问题，您看下是否解决了您的问题，可以追评进行沟通哦~

如果有您比较满意的答案 / 帮您提供解决思路的答案，可以点击【采纳】按钮，给回答的小伙伴一些鼓励哦～～

ps:问答VIP仅需29元，即可享受5次/月有问必答服务，了解详情>>>https://vip.csdn.net/askvip?utm_source=1146287632

非常感谢您使用有问必答服务，为了后续更快速的帮您解决问题，现诚邀您参与有问必答体验反馈。您的建议将会运用到我们的产品优化中，希望能得到您的支持与协助！

速戳参与调研>>>https://t.csdnimg.cn/Kf0y

Angularjs 遍历出表格，给不同的行 指定不同的背景色

Angularjs 遍历出表格，给不同的行指定不同的背景色