Get “next” and “previous” items in AngularJS?

Question

I'm using ngRoute to filter through a list of stories into one specific story when clicked, as below:

myApp.config(['$routeProvider', function($routeProvider) {
    $routeProvider.
    when('/stories', {
        templateUrl: '/partials/stories.html',
        controller: 'StoryListCtrl'
    }).
    when('/stories/:storyID', {
        templateUrl: '/partials/story.html',
        controller: 'StoryDetailCtrl'
    });
}]);

This works fine, but how can I get the "next" and "previous" stories. The user needs to be able to swipe left and right between the stories, but I can't simply load them all - I need to load each story and one either side of it. Then, when the user swipes either way, one story is removed and a new one is added.

Is this possible with Angular? I've searched like crazy but can't find any reference to this online anyway.

Thanks for your time!

Answer 1

you can use angular ng-swipe for this. eg Let's say, you have these files as follows.

story.html

<div ng-swipe-left="nextStory()" ng-swipe-right="previousStory()" >
    {{storyID}}
</div>

StoryDetailCtrl

myApp.controller('StoryDetailCtrl', function ($scope, $routeParams, $location) {
    $scope.storyID = $routeParams.storyID;
    $scope.nextStory = function () {
            var storyID = $routeParams.storyID;
            var path = 'stories/' + (storyID + 1 );
            $location.path(path);
            //console.log("This is left Swipe.");
        };

        $scope.previousStory = function () {
            var storyID = $routeParams.storyID;            
            var path = 'stories/' + (storyID - 1 );}            
            $location.path(path);
            //console.log("This is right Swipe.");
        };
});

Make sure to inject ngTouch as dependency in your module as ['ngTouch']

Hopefully, it makes sense to you.

Answer 2

When the user swipes you need to send a query with the current id and the orientation, so in that way you'll know is right is next and left if previous, being said that you can query

Right: take 1 greater than your current id

Left: take 1 less than your current id

No orientation: just load the current id

for Swiping you could use the $swipe service, ngSwipeLeft and ngSwipeRight as well.

you could resolve a function prior to the route /stories/:storyID execution, by passing the id, and orientation, or you can modify your route to support orientation like /stories/:storyID/:orientation and orientation can be null

take a look to this article that you may have as an example, I just would like to highlight the how to calculate the current page and the swipe functionality in angularjs, that may apply to your scenario.

angular.module('website', ['ngAnimate', 'ngTouch'])
    .controller('MainCtrl', function ($scope) {
        /* Code omitted */

        $scope.direction = 'left';
        $scope.currentIndex = 0;

        $scope.setCurrentSlideIndex = function (index) {
            $scope.direction = (index > $scope.currentIndex) ? 'left' : 'right';
            $scope.currentIndex = index;
        };

        $scope.isCurrentSlideIndex = function (index) {
            return $scope.currentIndex === index;
        };

        $scope.prevSlide = function () {
            $scope.direction = 'left';
            $scope.currentIndex = ($scope.currentIndex < $scope.slides.length - 1) ? ++$scope.currentIndex : 0;
        };

        $scope.nextSlide = function () {
            $scope.direction = 'right';
            $scope.currentIndex = ($scope.currentIndex > 0) ? --$scope.currentIndex : $scope.slides.length - 1;
        };
    })

cheers!

Answer 3

Let's say you have a list of stories in which you show in /stories page, now using <a ng-href="yourCtrl.getStoryHref()" />Full Story</a> ; Now you move to story page which shows full story. Here you have prev and next links which will take you to prev/next story <a ng-href="yourCtrl.getNextStoryHref()" />Next Story</a> and <a ng-href="yourCtrl.getPrevStoryHref()" />Previous Story</a>

Alternately if you want to use it on mobile, you can use ng-touch or fastclick . In ng-touch you can use ng-swipe-left and ng-swipe-right

<!-- Your Story Div -->
<div ng-swipe-right="yourCtrl.moveToNextStory">Content</div>

In your moveToNextStory function inside controller, set the $location.path to the path of next story