Question

我想根据单元格数据更改行的背景颜色，例如，如果它匹配表格单元格中的前四个字符＆＃34; td＆＃34;，则行应将其颜色更改为红色。

这是我的例子，它正在工作，但它需要全细胞数据。但我希望行颜色一旦匹配来自单元格的前四个字符就应该改变。

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

我的桌子是

如果表格单元数据＆＃34; Prash或Prashant＆＃34;表格行应该变为红色匹配。而不是采取＆＃34; Prashant Olekar＆＃34;

如何实现这一点请帮忙。谢谢

Answer 1

使用子字符串可以修剪字符串的字符，在这里我创建了另一个变量（已归档）“trimmed_name”，它是“name”的子字符串，它为您的字符串“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>

在Css中为各个类添加相应的颜色

控制器中的

  $scope.trimName = function (std) {
  std.trimmed_name = std.Name.substring(0, 4);
  return std;
};

如果'Prash'无效，请使用{'bgRed': std.trimmed_name === "Prash"}

希望它对你有所帮助。

Answer 2

您可以使用自定义过滤器根据行数据的条件设置类

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

    $scope.filterColor = function (item) {
        if (your condition) {
            item.class = 'your class';
        }
        else
            item.class = 'some other class';
        return true;
    };

Answer 3

我在Rajat的帮助下解决了我的问题，这是我的代码。但它只匹配第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>

和控制器

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

，输出

谢谢

如何使用angularjs根据相应的单元格数据更改表格行的背景颜色？

3 个答案: