在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中獲取「下一個」和「前一個」項目？

回答

相關問題