在AngularJS中获取“下一个”和“前一个”项目？

我使用ngRoute如下点击时通过故事的列表过滤成一个具体的故事，：在AngularJS中获取“下一个”和“前一个”项目？

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

这工作得很好，但我怎样才能得到“下一步”和“上”的故事。用户需要能够在故事之间左右滑动，但我不能简单地将它们全部加载 - 我需要加载每个故事并在其中的任何一侧加载。然后，当用户滑动时，一个故事被删除，并添加一个新的故事。

这是可能与Angular？我疯狂地搜索，但无论如何也找不到这个在线的任何参考。

谢谢你的时间！

来源

2014-09-22 Mike

您可以使用角度ng-swipe进行此操作。例如比方说，你有这些文件如下。

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."); 
     }; 
});

确保您的模块中注入ngTouch的依赖性为[ 'ngTouch']

希望，这对你有意义。

来源

2014-09-22 14:24:33 mbaljeetsingh

您正在调用该id是一个整数:) – 2014-09-22 14:27:19

@ jack.the.ripper是的，我做了，因为他没有提到任何有关它 – mbaljeetsingh 2014-09-22 14:29:19

如果我不使用一个整数作为一个常见的Id，会发生什么noSql数据库的情况？ – 2014-09-22 14:32:46

当用户刷你需要发送一个查询与当前的id和方向，因此以这种方式，你就会知道是对是下一个和以前如果，左正说，你可以查询

右：会比当前的ID

左更大的1：取1比目前少的id

无取向：菊st加载当前的ID

对于刷卡，您可以使用$swipe服务，ngSwipeLeft和ngSwipeRight。

在route/stories /：storyID执行之前，您可以通过传递id和orientation来解析函数，也可以修改路线以支持像/ stories /：storyID /这样的方向：orientation和orientation可以是null

看看这个article，你可能有一个例子，我只想强调如何计算当前页面和angularjs中的滑动功能，这可能适用于你的场景。

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

干杯！

来源

2014-09-22 14:13:04

感谢的路径，我会阅读那篇文章，并更多地研究它！ – Mike 2014-09-22 14:41:12

假设您有一个故事列表，您在/stories页面中显示，现在使用<a ng-href="yourCtrl.getStoryHref()" />Full Story</a>;现在您转到故事页面，其中显示完整故事。在这里，你有这将带你到上/下一个故事prev和next链接 <a ng-href="yourCtrl.getNextStoryHref()" />Next Story</a>和<a ng-href="yourCtrl.getPrevStoryHref()" />Previous Story</a>

或者，如果你想使用它的移动，你可以用NG-touch或fastclick。在NG-触摸你可以使用ng-swipe-left和ng-swipe-right

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

在你moveToNextStory函数内部控制，设置$ location.path到接下来的剧情你的答案jack.the.ripper

来源

2014-09-22 15:32:40 Siraj

在AngularJS中获取“下一个”和“前一个”项目？

回答

相关问题