滚动到 ng-repeat 中的下一项答案

【问题标题】：scroll to next item in ng-repeat滚动到 ng-repeat 中的下一项
【发布时间】：2015-06-18 20:13:30
【问题描述】：

使用下面的示例使用angular.element，我如何在每次点击时滚动到 ng-repeat 中的下一个项目？

这是我目前所拥有的，我只是不知道下一步该做什么：

var app = angular.module('myApp', []);

app.controller('MainController', ['$scope', function ($scope) {

   $scope.items = [{
      name: "apple"
   }, {
      name: "pear"
   }, {
      name: "Avacado"
   }, {
      name: "Banana"
   }];

   $scope.go = function ($event) {
      console.log(angular.element($event.currentTarget).parent().next());
   };

}]);

HTML：

<div ng-app="myApp">
  <div ng-controller="MainController">
    <div class="box" ng-repeat="item in items track by $index">
         <h3>{{item.name}}</h3>
        <button ng-click="go($event)">go to next box</button>
    </div>
  </div>
</div>

http://jsfiddle.net/0bwcLfv4/2/

jQuery 已经包含在网站上，所以我当然希望每个滚动都有动画。

【问题讨论】：

标签： angularjs

【解决方案1】：

现在确定您的尝试有多花哨。你可以做一些基本的事情，比如 HTML 锚标签。

<a name="section1">Section 1</a>

同时

<a href="#section1">Go to section 1</a>

【讨论】：

除此之外，您可以简单地对部分进行编号 (1,2,3) 并使用绑定到通用点击事件的计数器： $(document).click(function(){ counter++; } );

【解决方案2】：

您可以从每个锚点上的自定义指令开始（我在此示例中使用锚点，因为它在导航方面在语义上更正确）将侦听点击事件并相应地滚动视图。您将下一个元素的索引提供给该指令，因此它知道滚动到哪里。

<div scroll-box>
    <div ng-repeat="item in items ...">
        ...
        <a scroll-to-next="{{ ($index + 1) % items.length }}">...</a>
        <!-- make the last element point to the first one -->
    </div>
</div>

scroll-box 是一个包装指令，scroll-to-next 指令将记录它所在的元素。这是为了避免对元素进行查询，它更像是做事的“角度方式”。 scroll-to-next 指令不会查询，而是使用给定索引向包装器询问下一个元素。

这是一个 plunker 的工作实现。

【讨论】：

【解决方案3】：

为了平滑滚动，您可以使用 jQuery 的 animate 和 offset 函数。

这是JsFiddle link。

例如

HTML

<div ng-app="myApp">
    <div ng-controller="MainController">
        <div class="box" id="box{{$index}}" ng-repeat="item in items track by $index">
            <h3>{{item.name}}</h3>
            <button ng-click="go('#box' + ($index + 1))">go to next box</button>
        </div>
    </div>
</div>

我添加了id="box{{$index}}" 来分配targetId。

var app = angular.module('myApp', []);

app.controller('MainController', ['$scope', function ($scope) {

    $scope.items = [{
        name: "apple"
    }, {
        name: "pear"
    }, {
        name: "Avacado"
    }, {
        name: "Banana"
    }];

    $scope.go = function(targetId){
        var destination = $(targetId).offset().top;
        $('html, body').animate({scrollTop: destination}, 300);
    };

}]);

希望对您有所帮助。

【讨论】：

【解决方案4】：

使用下面的代码

HTML：

<div ng-app="myApp">
  <div ng-controller="MainController">
    <div class="box" ng-repeat="item in items track by $index" id="question{{item.id}}">
         <h3>{{item.name}}</h3>
        <button ng-click="go(item.id + 1)">go to next box</button>
    </div>
  </div>
</div>

控制器：

$scope.go = function (aid) {

  $timeout(function() {
     var idheight = $(window).height() + $('#question'+aid).position().top-100;
     $('html, body').animate({scrollTop: idheight}, 1000);
  }, 500);

 };

【讨论】：