在角度js中自动聚焦一行答案

【问题标题】：Auto focus a row in angular js在角度js中自动聚焦一行
【发布时间】：2017-12-26 10:32:51
【问题描述】：

我对@987654322@ 完全陌生。我有一张桌子，就像 -

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" ng-class="{'highlighter-row-Class' : file.id == 1}">
                                            <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" ng-class= "{'highlighter-QuickScore' : file.attributes.areQuickScoreFieldsMissing}">{{file.attributes.quickScore}}</td>
                                            <td class="text-center col-xs-5">
                                                <button class="btn btn-labeled  btn-info" title="Annotate Un-annotated Words" data-ng-click="getOrphans($index)">
                                                        <i class="fa fa-eye" aria-hidden="true"></i>
                                                    </button>
                                                <button class="btn btn-labeled  btn-info" ng-show="file.attributes.isUploadedDocument" title="Promote to Gold Standard" 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="Add to Tracker" ng-disabled="!file.attributes.isModelHtmlPresent || !isjdDeleted || !jdSelected"
                                                        data-ng-click="moveToJobDescription(file.attributes.name)">
                                                        <i class="fa fa-check-square" aria-hidden="true"></i>
                                                    </button>
                                            </td>
                                        </tr>
                                    </table>

在这里，我使用的是ng-repeat。因此，数据来自 ajax 调用。

现在在这里，file.id == 1 来自 ajax 调用，这工作正常，我也有一个 scrollbar 现在我只想在 file.id == 1 时关注该行。现在我能够强调这一点，但无法集中注意力。那么任何人都可以帮助我吗？提前致谢。

【问题讨论】：

使用 ng-if 。来源：docs.angularjs.org/api/ng/directive/ngIf
你对“焦点”的理解是什么。你想让浏览器自动滚动到第一行吗？
是的，滚动条应该在该行
这里没有输入元素。焦点仅适用于输入元素。

标签： javascript jquery angularjs ajax

【解决方案1】：

$timeout(function(){
angular.element('.highlighter-row-Class').focus();
},100);

这将专注于具有“highlighter-row-Class”的第一行，它将每 100 毫秒查找一次。如果您希望在加载数据时发生这种情况，只需将此代码添加到 ajax 响应处理程序。

【讨论】：

【解决方案2】：

“焦点”不是您在此处寻找的术语。

焦点是当您想要输入一个字段并且焦点在该字段上时（例如，当您使用 Tab 键切换字段时）。

您似乎在此表中根本没有任何输入字段。

我认为您正在寻找的是滚动到特定行。

如果您已经拥有ng-repeat 和一个通过 AJAX 获得的唯一 ID，这将相当容易；你真正要做的就是在你的行上做这样的事情：

<td id = "file{{file.id}}">Some text here</td>

然后只需使用超链接或window.location.assign() JavaScript 调用即可滚动到那里：

<a href="#file1">Scroll to row 1</a>

【讨论】：

【解决方案3】：

该指令将在条件为真时使输入元素聚焦。

<input type="text" focus-on="file.id">

指令：

.directive('focusOn', function() {
  return {
    scope: {
      focusOn: '='
    },
  link: function($scope, $element) {

  $scope.$watch('focusOn', function(shouldFocus) {
    if (shouldFocus) {
      $element[0].focus();
    }
  });

}
  };

})

【讨论】：

focusWhen在哪里？
抱歉打错了。现已更新