使用 angular-js 中的 id 突出显示表格的一行答案

【问题标题】：Highlight a row of a table using the id in angular-js使用 angular-js 中的 id 突出显示表格的一行
【发布时间】：2017-09-11 05:47:34
【问题描述】：

我是angularjs 的新手。我有一张桌子，就像 -

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>

所以，现在我有一个来自back-end 的 id。我想突出显示id is 1 的行。 Temporary Id is the ID here.

表格数据就像-

Sr.No 文档分数 QuickScore 操作 1 abc 12 5 aa

在这里，当 ID 为 1 时，我想突出显示该行。任何人都可以给我任何想法吗？感谢您的帮助。

【问题讨论】：

添加 id 为 1 的 ng-class。例如 ng-class="{'highlighterClass' : file.id == 1}";。 .在你的情况下

标签： javascript jquery html css angularjs

【解决方案1】：

你可以使用ngClass directive给<TR>添加一个CSS类

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

【讨论】：

【解决方案2】：

实际的突出显示应该通过 CSS 完成。因此，您的 angular is 代码应该简单地将要突出显示的行上的调用设置为 CSS 代码可以理解并为您突出显示的内容

【讨论】：