如何使用angularjs根据各个单元格数据更改表格行的背景颜色？
[英]How to change Background color of table row based on respective cell data using angularjs?
问题描述
I want to change Background color of row based on cell data, like if it matches first four characters from table cell "td", then row should change its color to red. 
我想根据单元格数据更改行的背景颜色，例如如果它与表单元格“ td”中的前四个字符匹配，则行应将其颜色更改为红色。
here is my example, it is working but it takes whole cell data.but i want row color should change once it matches first four characters from cell. 这是我的示例，它正在工作，但需要整个单元格数据。但是我希望一旦它与单元格中的前四个字符匹配，行颜色就应该改变。
<style>
.bgRed{
background-color:red;
}
</style>
<body ng-app="myApp">
<div ng-controller="myController">
<div class="container" style="margin-top:40px;">
<div class="row">
{{error}}
<div class="col-md-6">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>Name</th>
<th>Class Name</th>
<th>Roll No</th>
<th>Email</th>
</tr>
</thead>
<tbody ng-repeat="std in students">
**<tr ng-class="{'bgRed': std.Name === 'Prash'}>**
<td>{{std.Name}}</td>
<td>{{std.ClassName}}</td>
<td>{{std.RollNo}}</td>
<td>{{std.Email}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
and my table is 我的桌子是
Table row should change to red if table cell data "Prash or Prashant" matches.instead of taking "Prashant Olekar" 如果表格单元格数据“ Prash或Prashant”匹配，则表格行应更改为红色。而不是使用“ Prashant Olekar”
how to achive this please help. 如何做到这一点，请帮忙。 Thank you 谢谢
3 个解决方案
解决方案1
2 已采纳 2017-12-08 18:18:42
Using substring you can trim the characters of the string, here I'm creating one more variable(filed) "trimmed_name" which is a substring of your "name" which gives you first 4 characters of your string "name". 使用子字符串可以修剪字符串的字符，这里我创建了另一个变量（已归档）“ trimmed_name”，它是“名称”的子字符串，为您提供了字符串“名称”的前4个字符。
<tr ng-repeat="std in students" ng-init="trimName(std)">
<td ng-class="{'bgRed': std.trimmed_name === 'Prash', 'bgBlue': std.trimmed_name === 'Pavi', 'bgBlack' : std.trimmed_name === 'Pava'}">{{std.Name}}</td>
<td>{{std.ClassName}}</td>
<td>{{std.RollNo}}</td>
<td>{{std.Email}}</td>
</tr>
In Css add respective colours for respective classes 在CSS中为相应的类别添加相应的颜色
in your controller 在您的控制器中
$scope.trimName = function (std) {
std.trimmed_name = std.Name.substring(0, 4);
return std;
};
Just in case if 'Prash' dose not work use {'bgRed': std.trimmed_name === "Prash"} 万一'Prash'不起作用，请使用{'bgRed': std.trimmed_name === "Prash"}
Hope it helps you. 希望对您有帮助。
解决方案2
1 2017-12-08 18:36:14
you can use a custom filter to set class according to condition of your row data, 您可以使用自定义过滤器根据行数据的条件设置类，
html html
<tbody ng-repeat="std in students | filter:filterColor">
<tr class="{{std.class}}">
<td>{{std.Name}}</td>
<td>{{std.ClassName}}</td>
<td>{{std.RollNo}}</td>
<td>{{std.Email}}</td>
</tr>
</tbody>
js JS
$scope.filterColor = function (item) {
if (your condition) {
item.class = 'your class';
}
else
item.class = 'some other class';
return true;
};
解决方案3
0 2017-12-10 11:41:47
I have got solution to my question with the help of Rajat, here is my code. 在Rajat的帮助下，我已经找到了解决问题的方法，这是我的代码。 but it only matches characters from 0th Position. 但它仅匹配第0位的字符。
<head>
<title></title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="Content/bootstrap.min.css" rel="stylesheet" />
<script src="Scripts/angular.min.js"></script>
<script src="Scripts/App/app.js"></script>
<style>
.bgRed {
background-color: #cfeaff;
}
</style>
</head>
<body ng-app="myApp">
<div ng-controller="myController">
<div class="container" style="margin-top:40px;">
<div class="row">
{{error}}
<div class="col-md-6">
<table class="table table-bordered table-condensed">
<thead>
<tr>
<th>Name</th>
<th>Class Name</th>
<th>Roll No</th>
<th>Email</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="std in students" ng-init="trimName(std)" ng-class="{bgRed: std.trimmed_name === 'Pras'}">
<td>{{std.Name}}</td>
<td>{{std.ClassName}}</td>
<td>{{std.RollNo}}</td>
<td>{{std.Email}}</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</body>
</html>
and In Controller 和在控制器
/// <reference path="../angular.min.js" />
var myApp = angular.module('myApp', [])
.controller("myController", function ($scope, $http, $log) {
var successCallback = function (response) {
$scope.students = response.data;
$log.info(response);
}
var errorCallback = function (response) {
$scope.error = response.data;
$log.info(response);
}
$scope.StudentsData = $http({
method: 'GET',
url: 'PKWebService.asmx/getPkData'
})
.then(successCallback, errorCallback);
$scope.trimName = function (std) {
std.trimmed_name = std.Name.substring(0, 4);
return std;
};
});
and output is 和输出是
Thank you 谢谢
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.