Как заставить этот JS показывать следующую карту вместо случайных карт?

Question

Я работаю над карточным проектом Swipe, используя HTML, CSS и JS.

Я взял этот код JS из codepen и реализовал его, но проблема в том, что карты рандомизированы. Как сделать так, чтобы это было последовательно (не повторялось)?

angular.module('starter', ['ionic', 'ionic.contrib.ui.cards'])
  .directive('noScroll', function($document) {
    return {
      restrict: 'A',
      link: function($scope, $element, $attr) {
        $document.on('touchmove', function(e) {
          e.preventDefault();
        });
      }
    }
  })

  .controller('CardsCtrl', function($scope, $ionicSwipeCardDelegate) {
    var cardTypes = [
      {title: '1'},
      {title: '2'},
      {title: '3'},
      {title: '4'},
      {title: '5'}
    ];

    $scope.cards = Array.prototype.slice.call(cardTypes, 0, 0);

    $scope.cardSwiped = function(index) {
      $scope.addCard();
    };

    $scope.cardDestroyed = function(index) {
      $scope.cards.splice(index, 1);
    };

    $scope.addCard = function() {
      var newCard = cardTypes[
        Math.floor(Math.random() * cardTypes.length)
      ];
      newCard.id = Math.random();
      $scope.cards.push(angular.extend({}, newCard));
    }
  })

  .controller('CardCtrl', function($scope, $ionicSwipeCardDelegate) {
    $scope.goAway = function() {
      var card = $ionicSwipeCardDelegate.getSwipeableCard($scope);
      card.swipe();
    };
  });

Answer 1

Проблема с вашим $scope.addCard При получении новой карты вы используете Math.Random

Правильный путь -

    var cardCount = -1;//    
    $scope.addCard = function () {
        if (cardCount < cardTypes.length - 2) {
            cardCount++;//get the next card
        }
        else {
            alert("Reached last card");//last card reached
        }
        var newCard = cardTypes[cardCount];
        newCard.id = cardCount;
        $scope.cards.push(angular.extend({}, newCard));
    }

Answer 2

Я бы изменил следующее:

$scope.cards = Array.prototype.slice.call(cardTypes, 0, 0);

Замена на:

$scope.cards = cardTypes; // this keeps the series ordered as is defined

Возможно, вы захотите .reverse() cardTypes, чтобы первый элемент в массиве был первой картой (карты фактически извлекаются из массива, поэтому последний элемент будет первой картой, если вы не поменяете местами ее):

$scope.cards = cardTypes.reverse(); // reverse the array

Тогда кажется, что новые карты добавляются случайным образом после каждого удара:

$scope.cardSwiped = function(index) {
  $scope.addCard();
};

Может быть, вы можете прокомментировать все это или просто $scope.addCard(), если это сломает приложение.