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

发布时间：2020-12-17 17:31:42 所属栏目：安全来源：网络整理

导读：我通过ng-repeat显示项目列表 div ng-repeat="{item in items}" h3{{item.name}}/h3h3{{item.price}}/h3h3{{item.date}}/h3/div 我有一个添加,我点击并添加新项目..我显示通过ng-repeat在div和包含滚动..每当我添加一个新项目滚动条停止,我可以通过向下滚动

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

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

我有一个添加,我点击并添加新项目..我显示通过ng-repeat在div和包含滚动..每当我添加一个新项目滚动条停止,我可以通过向下滚动看到新添加的项目只要.

我使用ng-focus =“{$last}”将焦点设置在最后一个项目上,但它没有用.

我需要将重点放在ng-repeat的最后一个元素上,即使我在div中有50个元素.

Plss帮助我…

解决方法

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

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用于指定焦点上的行为,而不是触发对元素的焦点.

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!