There are two buttons in my code that should remove a div within an ng-repeat loop. Depending on which button is clicked, a custom CSS class should be added to the effect. The CSS changes based on the option selected.
When I click on a button, either 'reject' or 'accept' class should be added to the first card and then that card should be removed. Right now, I am able to remove the card using .pop(), but I'm struggling to add the CSS class. If I remove $scope.matches.pop(); the class gets added but the card remains, and if I keep that line, the class doesn't get added.
You can view the Plunker here: http://plnkr.co/edit/go54DQMsPdsRcssLeZZ5?p=preview
Here is the code snippet:
<td-card ng-class="{reject : rejectShow(match), accept : acceptShow(match)}" ng-repeat="match in matches track by $index" class="cards card-{{$index}}" >
<div class="content">content</div>
</td>
<button class="button" ng-click="reject(match)">
button reject
</button>
<button class="button" ng-click="accept(match)">
button accept
</button>
AngularJS Code:
var shownAccept = false
var shownReject = false
var className = 'initClass';
$scope.accept = function(match) {
console.log('accept button')
$scope.matches.pop();
shownAccept = match;
}
$scope.reject = function(match) {
console.log('reject button')
$scope.matches.pop();
shownReject = match;
}
$scope.rejectShow = function(match) {
return angular.equals(shownReject, match);
}
$scope.acceptShow = function(match) {
return angular.equals(shownAccept, match);
}
Note: Solutions without JQuery are preferred.