Перейдите к следующему элементу в 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> 

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

};