CODEWITHSUNDEEP
javascriptjqueryhtmlcssangularjs
ganesh kaspate
ganesh kaspate

Reputation: 2685

Highlight a row of a table using the id in angular-js

I am new to angularjs. I have a table which is like -

HTML

<table class="table table-striped" id="manageResumeTable">
    <thead class="text-center text-info text-capitalize">
        <th class="text-center col-xs-1">Sr.No.</th>
        <th class="text-center col-xs-4">Document</th>
        <th class="text-center col-xs-1">Score</th>
        <th class="text-center col-xs-1">QuickScore</th>
        <th class="text-center col-xs-5">Actions</th>
    </thead>
    <tr ng-repeat="file in processResumeFiles">
        <td class="text-center col-xs-1">{{ file.temporaryId }}</td>
        <td class="view-orphan uploadResumeTableCellOverFlow col-xs-4">
            {{ file.attributes.name }}
        </td>
        <td class="text-center col-xs-1">{{file.totalScore}}</td>
        <td class="text-center col-xs-1">{{file.attributes.quickScore}}</td>
        <td class="text-center col-xs-5">
            <button class="btn btn-labeled  btn-info" title="Annotate Un-annotated Words" ng-disabled="!file.attributes.isUploadedDocument" data-ng-click="getOrphans($index)">
                    <i class="fa fa-eye" aria-hidden="true"></i>
                </button>
            <button class="btn btn-labeled  btn-info" title="Promote to Gold Standard" ng-disabled="!file.attributes.isCommitted || !file.attributes.isUploadedDocument" data-ng-click="markAsGoldStd(file.attributes.name)">
                    <i class="fa fa-share" aria-hidden="true"></i>
                </button>
            <button class="btn btn-labeled  btn-info" title="Delete from Corpus" data-ng-click="deleteResume(file.attributes.name)">
                    <i class="fa fa-trash" aria-hidden="true"></i>
                </button>
            <button class="btn btn-labeled  btn-info" title="Move to Archive" ng-disabled="!file.attributes.isCommitted || !file.attributes.isUploadedDocument" data-ng-click="moveToSolar(file.attributes.name)">
                    <i class="fa fa-sign-out" aria-hidden="true"></i>
                </button>
            <button class="btn btn-labeled  btn-info" title="Add to Tracker" ng-disabled="!file.attributes.isCommitted || !isjdDeleted || !jdSelected"
                    data-ng-click="moveToJobDescription(file.attributes.name)">
                    <i class="fa fa-check-square" aria-hidden="true"></i>
                </button>
        </td>
    </tr>
</table>

So, Now I have a id which is coming from a back-end. I want to highlight a row whose id is 1. Temporary Id is the ID here.

Table data is like -

Sr.No Document Score QuickScore Actions 1 abc 12 5 aa

Here, When the ID is 1 then I want to highlight the row. Can any one please give me any Idea about it ? Thanks for the help.

Upvotes: 0

Views: 75

Answers (2)

Satpal
Satpal

Reputation: 133443

You can use ngClass directive to add a CSS class to <TR>

<tr ng-repeat="file in processResumeFiles"  ng-class="{'highlighterClass' : file.temporaryId == 1}">

Upvotes: 1

user3206236
user3206236

Reputation: 325

The actual highlighting should be done via CSS. Therefore your angular is code should simply set the call on the row you want to highlight to something that the CSS code can understand and highlight for you

Upvotes: 0

Related Questions