Javascript 如何使用angularjs根据各自的单元格数据更改表行的背景色？_Javascript_Jquery_Html_Asp.net_Angularjs

Javascript 如何使用angularjs根据各自的单元格数据更改表行的背景色？

javascript jquery html asp.net angularjs

Javascript 如何使用angularjs根据各自的单元格数据更改表行的背景色？,javascript,jquery,html,asp.net,angularjs,Javascript,Jquery,Html,Asp.net,Angularjs,我想根据单元格数据更改行的背景色，比如若它匹配表单元格“td”的前四个字符，那个么行的颜色应该更改为红色这是我的例子，它正在工作，但它需要整个单元格数据。但我希望行的颜色在匹配单元格的前四个字符后应该改变 <style> .bgRed{ background-color:red; } </style> <body ng-app="myApp"> <div ng-controll

我想根据单元格数据更改行的背景色，比如若它匹配表单元格“td”的前四个字符，那个么行的颜色应该更改为红色

这是我的例子，它正在工作，但它需要整个单元格数据。但我希望行的颜色在匹配单元格的前四个字符后应该改变

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


bgRed先生{
背景色：红色；
}
{{error}}
名称
类名
卷号
电子邮件
** 使用子字符串可以修剪字符串的字符，
这里我创建了一个变量（字段）“trimmed_name”，它是“name”的子字符串，它给出了字符串“name”的前4个字符
以防万一，如果“Prash”不起作用，请使用{'bgRed'：std.trimmed_name==“Prash”}

希望对您有所帮助。使用子字符串可以修剪字符串的字符，
这里我创建了一个变量（字段）“trimmed_name”，它是“name”的子字符串，它给出了字符串“name”的前4个字符
以防万一，如果“Prash”不起作用，请使用{'bgRed'：std.trimmed_name==“Prash”}

希望对您有所帮助。
您可以使用自定义筛选器根据行数据的条件设置类
html
您可以使用自定义筛选器根据行数据的条件设置类
html
在拉贾特的帮助下，我找到了问题的答案，这是我的代码。但它只匹配第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>


bgRed先生{
背景色：#cfeaff；
}
{{error}}
名称
类名
卷号
电子邮件
{{std.Name}
{{std.ClassName}
{{std.RollNo}
{{std.Email}

和在控制器中
/// <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;
                };
            });

//
var myApp=angular.module（'myApp'，[]）
.controller（“myController”，函数（$scope、$http、$log）{
var successCallback=函数（响应）{
$scope.students=response.data；
$log.info（响应）；
}
var errorCallback=函数（响应）{
$scope.error=response.data；
$log.info（响应）；
}
$scope.StudentsData=$http({
方法：“GET”，
url:'PKWebService.asmx/getPkData'
})
.然后（successCallback，errorCallback）；
$scope.trimName=函数（标准）{
std.trimmed_name=std.name.substring（0,4）；
返回std；
};
});

输出是

谢谢
在拉贾特的帮助下，我找到了问题的答案，这是我的代码。但它只匹配第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>


bgRed先生{
背景色：#cfeaff；
}
{{error}}
名称
类名
卷号
电子邮件
{{std.Name}
{{std.ClassName}
{{std.RollNo}
{{std.Email}

和在控制器中
/// <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;
                };
            });

//
var myApp=angular.module（'myApp'，[]）
.controller（“myController”，函数（$scope、$http、$log）{
var successCallback=函数（响应）{
$scope.students=response.data；
$log.info（响应）；
}
var errorCallback=函数（响应）{
$scope.error=response.data；
$log.info（响应）；
}
$scope.StudentsData=$http({
方法：“GET”，
url:'PKWebService.asmx/getPkData'
})
.然后（successCallback，errorCallback）；
$scope.trimName=函数（标准）{
std.trimmed_name=std.name.substring（0,4）；
返回std；
};
});

输出是

谢谢你非常感谢你的回答，我会试试这个让你知道。如果它的工作，我会很高兴。非常感谢你的回答，我会尝试这个，让你知道。如果能成功，我会很高兴的。非常感谢你，兄弟。。我很感激你的回答，很有效。非常感谢你，兄弟。。我很感激你的回答，它是有效的。不仅仅是从第0个位置，你可以控制它，substrin
<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>

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