Question

我正在使用使用angularJS和离子框架的滑动卡界面创建一个应用程序，它将具有与此网站类似的功能（https://windowshopper.me/）

在滑动以接受卡片时，我希望它更改我的阵列，以便Done：False将更改为Done：True。

这将允许我过滤Done：True并显示列表中已接受的所有卡片。

以下是我的代码 HTML：

<td-cards>
    <td-card ng-repeat="card in cards" on-destroy="cardDestroyed($index)" on-swipe-left="cardSwipedLeft($index)" on-swipe-right="cardSwipedRight($index)" on-partial-swipe="cardPartialSwipe(amt)" class="card-{{card.index}}" ng-controller="CardCtrl">
    <h4 style="text-align:center"> {{card.title}}</h4>
      <div class="image">
        <div class="yes-text" ng-style="leftTextOpacity">Yes</div>
        <img ng-src="{{card.image}}">
        <div class="no-text" ng-style="rightTextOpacity">No</div>
      </div>
      <p> {{card.desc}} </p>
    </td-card>
  </td-cards>

JS：

//Controller for Cards
.controller('CardsCtrl', function($scope, TDCardDelegate) {
  console.log('CARDS CTRL');
  var cardTypes = [
{id: 1, title: "Frank", image: 'img/Frank.png', desc:"This will be card Description", done: true },
{id: 2, title: "John Lewis", image: 'img/JohnLewis.png', desc:"This will be card Description", done: true },
{id: 3, title: "Generali", image: 'img/Generali.png', desc:"This will be card Description", done: true },
 ];


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

$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, TDCardDelegate) {
  $scope.cardSwipedLeft = function(index) {
  console.log('LEFT SWIPE');
  $scope.addCard();
 };

$scope.cardSwipedRight = function(index) {
  console.log('RIGHT SWIPE');
  $scope.addCard();
  };
});

Answer 1

你在这里没有明确的问题，但我猜你需要帮助，了解如何在滑动回调中做什么。您正在从转发器传递索引，因此您可以使用它来访问卡阵列中的滑动项目。

$scope.cardSwipedRight = function(index) {
  $scope.cards[index].done = true;
  $scope.addCard();
  };
});

在滑动时编辑阵列

1 个答案: