angularjs - 如何将焦点设置在 ng-repeat 中的最后一个元素上？

Question

我通过 ng-repeat 显示项目列表

<div ng-repeat="{item in items}" >
<h3>{{item.name}}</h3>
<h3>{{item.price}}</h3>
<h3>{{item.date}}</h3>
</div>

我有一个添加，我点击并添加新项目。我通过 div 中的 ng-repeat 显示并且包含滚动。每当我添加新项目时，滚动条保持静止，我可以看到新添加的项目只需向下滚动即可。

我使用 ng-focus="{$last}"将焦点设置在最后一项上，但它不起作用。

即使 div 中有 50 个元素，我也需要将焦点设置在 ng-repeat 中的最后一个元素上。

请帮助我..

Answer 1

我建议使用指令来实现此行为。

module.directive('setFocus', function(){
  return{
      scope: {setFocus: '='},
      link: function(scope, element){
         if(scope.setFocus) element[0].focus();             
      }
  };
});

在您的 HTML 上:

<div ng-repeat="{item in items}" set-focus="$last">
    <h3>{{item.name}}</h3>
    <h3>{{item.price}}</h3>
    <h3>{{item.date}}</h3>
</div>

加载页面时，.focus() 将在最后一个元素上运行。

如果添加一个元素，.focus() 将在新的最后一个元素上运行。

现在您的问题在于哪些元素可以在不同的浏览器中聚焦。我建议你检查which HTMLElement can receive focus .

因此，您可能想在 div 内添加一个隐藏的可聚焦元素，并修改指令以聚焦于此，或者向您的 ng-repeat div 添加 tabindex 属性。 (tabindex="-1 以外的某个数字")

<div ng-repeat="{item in items}" set-focus="$last" tabindex="0">
    <h3>{{item.name}}</h3>
    <h3>{{item.price}}</h3>
    <h3>{{item.date}}</h3>
</div>

希望这会有所帮助!

澄清一下:ng-focus 用于指定焦点上的行为，而不是触发元素上的焦点。