i am creating an app with a Swipe card interface using angularJS and ionic framework it will have similar functionality as this site ( https://windowshopper.me/ )
On swipeing to accept the card i want it to change my array so that Done : False will change to Done : True.
This will allow me to filter Done: True and display all cards which have been accepted in a list.
Here is my code below 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();
};
});
You don't have a clear question here, but I'm guessing you want help with understanding what to do on the swipe callbacks. You are passing the index from the repeater, so you can use that to access the swiped item in the cards array.
$scope.cardSwipedRight = function(index) {
$scope.cards[index].done = true;
$scope.addCard();
};
});