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}”将焦点设置在最后一项，但它没有用。

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

Plss帮助我...

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

Answer 2

您可以在AngularJS中使用$ anchorScroll。只需在div底部放置一个链接（＆lt; a＆gt;＆lt; / a＆gt;） 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"/>

当您点击“添加”按钮或其他任何内容时，请在控制器中调用一个功能，该功能会引导您到 id =“bottom”的底部链接。

$scope.addNewItem = function() {
    //Add new item here...

    //After adding item, go to bottom:
    $location.hash('bottom');
    $anchorScroll();
};

您可以在AngularJS的Documentaion上阅读更多相关信息： Documentaion of $anchorScroll.

如何将重点放在ng-repeat的最后一个元素上？

2 个答案: