Angularjs 如何设置ng repeat中最后一个元素的焦点？

我通过ng repeat显示项目列表

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

{{item.name}
{{item.price}}
{{item.date}

我有一个add，在这里我单击并添加新项目。我在一个div中通过ng repeat显示，其中包含滚动。每当我添加新项目时，滚动条静止不动，我只能通过向下滚动查看新添加的项目

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

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

---

请在这方面帮助我。

您可以在AngularJS中使用$anchorScroll。 只需在div底部放置一个id=“bottom”和ng hide=“true”的链接（），这样您就不会真正看到该链接

<div id="scrollArea" ng-repeat="item in items">
    <h3>{{item.name}}</h3>
    <h3>{{item.price}}</h3>
    <h3>{{item.date}}</h3>
    <a id="bottom"></a>
</div>
<button type="button" ng-click="addNewItem" value="Add"/>

您可以在AngularJS的文档中了解更多信息：

---

我建议使用指令来实现这种行为

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>

{{item.name}
{{item.price}}
{{item.date}

加载页面时，将在最后一个元素上运行.focus（）

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

现在的问题在于哪些元素可以在不同的浏览器中聚焦。我建议你检查一下

因此，您可能希望在div中添加一个隐藏的focusable元素，并修改该指令以关注该元素，或者向ng repeat div添加一个tabindex属性（tabindex=“除-1以外的数字”）

{{item.name}
{{item.price}}
{{item.date}

我希望这有帮助

澄清：ng focus用于指定焦点行为，而不是触发元素焦点

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

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