How to change Background color of table row based on respective cell data using angularjs?

Question

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.

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"

how to achive this please help. Thank you

Rajath M S · Accepted Answer · 2017-12-08 19:00:22Z

3

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

<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

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

Hope it helps you.

edited Dec 8, 2017 at 19:00

answered Dec 8, 2017 at 18:18

Rajath M S

1,0922 gold badges18 silver badges28 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

PK-1825 Over a year ago

Thank you so much bro.. I appreciate your answer it works.

NTP · Accepted Answer · 2017-12-08 18:36:14Z

1

you can use a custom filter to set class according to condition of your row data,

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

answered Dec 8, 2017 at 18:36

NTP

4,4483 gold badges18 silver badges25 bronze badges

1 Comment

PK-1825 Over a year ago

Thank you so much for your answer, I will try this and let you know. if its work i will be happy.

PK-1825 · Accepted Answer · 2017-12-11 11:24:11Z

I have got solution to my question with the help of Rajat, here is my code. but it only matches characters from 0th Position.

<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

not just from the 0th position, you have a control over it, substring(0, 4), first arg is your starting position, i.e 0(zero) in this example. string.substring(start, end).
yes but within the table cell i need match random contents..say for ex: if content comes first in one row or same content comes last in second row or in the middle, so in that case i need to match that content in every row if it is present else leave that as it is.

Collectives™ on Stack Overflow

How to change Background color of table row based on respective cell data using angularjs?

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related