javascript - 如何让这个 JS 显示下一张卡片而不是随机卡片？

Question

我正在使用 HTML、CSS 和 JS 开发一个刷卡元素。

我从 codepen 获取了这个 JS 代码并实现了它，但问题是卡片是随机的。如何使其按顺序排列(不重复)？

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.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() 如果它破坏了应用程序。