Highlighting UI table rows based on specific condition

Question

I have a dynamically populated table displayed in UI with few records which holds the data of input CSV file from user.

On deleting a few records via UI and choosing submit, this below submit function interacts with controller and returns List<Object> . This will be replace the existing table.

I'm am now trying to highlight rows which has a success status. But in vain.

Can someone guide what am I missing?

// CONTROLLER UPLOAD FILE
uploadApp.controller('uploadFileController', [
    '$scope',
    '$rootScope',
    '$http',
    '$window',
    function($scope, $rootScope, $http, $window) {
        $scope.uploadResult = "";
        $scope.doUploadFile = function() {
            var file = $scope.uploadedFile;
            var url = "/uploadfile";

            var data = new FormData();
            data.append('uploadfile', file);

            var config = {
                transformRequest: angular.identity,
                headers: {
                    'Content-Type': undefined
                }
            }

            $http.post(url, data, config).then(
                function(response) {
                    $rootScope.policyData= response.data;
                });
        };

        $scope.deletRecord = function(RoleID) {
            var index = -1;
            var policyArray = eval($scope.policyData);
            for (var i = 0; i < policyArray.length; i++) {
                if (policyArray[i].RoleID === RoleID) {
                    index = i;
                    break;
                }
            }
            if (index === -1) {
                alert("Something gone wrong");
            }
            $scope.policyData.splice(index, 1);
            console.log(eval($scope.policyData));
        }

        $scope.submit = function(policyData) {
            $http({
                'url': '/updateOverride',
                'method': 'POST',
                'headers': {
                    'Content-Type': 'application/json'
                },
                'data': $scope.policyData
            }).then(function(response) {
                $scope.policyData = response.data;
                console.log(response);
                console.log($scope.policyData);
                for (var i = 0; i < response.data.length; i++) {
                    $("tr:contains(Success)").addClass("highlightRow");
                }

                $("#alert_success").show()
                $window.scrollTo(0, 0);
            })
        };
    }
]);

table section in html :

<table id="pasRecordTable" st-table="display_records"
                  st-safe-src="policyData" ng-init="getData()" ng-show="policyData"
                  class="table table-bordered table-striped" ng-controller="uploadFileController">
                  <caption>*PAS - MDM Reject records.</caption>
                  <thead class="thead-dark">
                     <tr>
                        <!-- <th scope="col">#</th> -->
                        <th>Policy Number</th>
                        <th>Source ID</th>
                        <th width="110px">First Name</th>
                        <th>Middle Name</th>
                        <th>Last Name</th>
                        <th>Error description</th>
                        <th>PAS Validated</th>
                        <th>Note</th>
                        <th>Action</th>
                     </tr>
                  </thead>
                  <tbody>
                     <tr st-select-row="row" st-select-mode="multiple"
                        ng-repeat="row in display_records" id="{{row.PolicyNumber}}">
                        <!-- <th scope="row">1</th> -->
                        <td>{{row.PolicyNumber}}</td>
                        <td>{{row.RoleID}}</td>
                        <td>{{row.FirstName}}</td>
                        <td>{{row.MiddleName}}</td>
                        <td>{{row.LastName}}</td>
                        <td>{{row.ErrorDescription}}</td>
                        <td>{{row.PASValidated}}</td>
                        <td>{{row.Note}}</td>
                        <td><button type="button" class="btn btn-default btn-danger"
                           ng-click="deletRecord(row.RoleID)">
                           <i class="fa fa-trash" aria-hidden="true"></i>
                           </button>
                        </td>
                     </tr>
                     <tr>
                        <!-- <td></td> -->
                        <td></td>
                        <td></td>
                        <td></td>
                        <td style="border-bottom: 1px solid #ddd;"></td>
                        <td style="border-bottom: 1px solid #ddd;">
                           <button id="showRecordSubmit" type="submit" class="btn btn-success btn-submit" ng-click="submit(policyData)">Submit</button>
                        </td>
                        <td></td>
                        <td></td>
                        <td></td>
                        <td></td>
                     </tr>
                  </tbody>
               </table>

highlightRow css:

.highlightRow {
  background-color: #DA8C38;
}

Before submit :

After submit :

Answer 1

1. You loop through the data but the selector is the same so you can set it once.
2. As best practice, don't mix jQuery and Angular - you don't know when the view (html) will be changed so your code will not work anyway.

The Angular way to do this is using ng-class directive on the row:

 angular.module('app', []).controller('ctrl', function($scope) { $scope.items = [ { name: 'item1', status: 'success' }, { name: 'item2', status: 'fail' }, { name: 'item3', status: 'success' }, ]; }); 

 .highlightRow { background: green; } 

 <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> <div ng-app="app" ng-controller="ctrl"> <table> <tr ng-repeat="item in items" ng-class="{highlightRow: item.status === 'success'}"> <td ng-bind="item.name"></td> <td ng-bind="item.status"></td> </tr> </table> </div> 

In your code you need to add the ng-class directive to the tr . Something like:

<tr ng-class="{highlightRow: row.Note === 'success'}" st-select-row="row" st-select-mode="multiple" ng-repeat="row in display_records" id="{{row.PolicyNumber}}">

Answer 2

Add quotes around the string parameter of :contains , as such:

$("tr:contains('Success')").addClass("highlightRow");

JQuery :contains() selector docs