CODEWITHSUNDEEP
angularjs
Michael Wilson
Michael Wilson

Reputation: 1579

scroll to next item in ng-repeat

With an example like the below using angular.element, how could I scroll to the next item in an ng-repeat on every click?

This is what I have so far, I just don't know what to do next:

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 is included on the site already, so I certainly want animation for every scroll.

Upvotes: 1

Views: 2806

Answers (4)

Ronak Patel
Ronak Patel

Reputation: 3444

Use below code

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>

Controller:

$scope.go = function (aid) {

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

 };

Upvotes: -1

Alberto I.N.J.
Alberto I.N.J.

Reputation: 1853

For smooth scrolling, you can use animate and offset functions by jQuery.


Here's the 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>

I added id="box{{$index}}" to assign the 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);
    };

}]);


Hope it helps.

Upvotes: 2

jcz
jcz

Reputation: 903

You can start with a custom directive on each anchor (I use anchor in this example since it is more semantically correct for navigation purposes) that will listen for click events and scroll the view accordingly. You feed that directive with the index of next element, so it knows where to scroll to.

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

The scroll-box is a wrapper directive to which the scroll-to-next directive will log the element on which it resides. This is to avoid making queries for elements, it's more "the angular way" of doing things. Instead of doing query the scroll-to-next directive will ask the wrapper for the next element using the given index.

Here's a plunker with working implementation.

Upvotes: 3

Ernesto Rendon
Ernesto Rendon

Reputation: 312

Now sure how fancy your trying to get. You can do something basic like HTML anchor tags.

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

alongside

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

Upvotes: 5

Related Questions