滚动到ng-repeat中的下一个项目

Question

通过以下使用的示例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已经包含在网站上,所以我当然希望每个卷轴都有动画.

Answer 1

现在确定你想要得到多么的花哨.您可以执行基本操作,例如HTML锚标记.

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

并肩

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