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锚标签。

inherit

一起

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

Answer 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的工作实施。

Answer 3

要进行平滑滚动，您可以使用 jQuery 动画和偏移功能。

这是JsFiddle link。

的 E.g。

的 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 。

<强> JS

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); }; }]);

希望它有所帮助。

Answer 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);

 };

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

4 个答案: