I am currently working on a feature where all boxes should be automatically checked when the user deselects them both.
Just to clarify, there are two items in cards as shown in the image. These cards are initially selected. When the user deselects the first one, the other card will be checked. Likewise, when the user deselects the second one, both of them should automatically be selected again.
This is what I have implemented so far:
HTML
<ion-list ng-show="transactionsCtrl.showCardBox">
<ion-item class="bg-blue p-0">
<div class="dotted-1"></div>
<div ng-repeat="singleCard in transactionsCtrl.cards">
<div class="row p-tb0 m-t5" ng-click="transactionsCtrl.ToggleCardFilter(singleCard.g_id)">
<div class="col col-20">
<div ng-class="{'image-size-1-50 white-checked-image': singleCard.selected , 'image-size-1-50 white-unchecked-image': !singleCard.selected}"></div>
</div>
<div class="col col-80">
<div class="sub-title-white oslight">{{(singleCard.cardNumberMasked).slice(-5)}} <span class="m-l10 right {{transactionsCtrl.PlaceCardImageClassForFilter(singleCard.g_productSubCategory)}}"> </span></div>
</div>
JS
self.ToggleCardBox = function() {
closeAll();
self.showCardBox = !self.showCardBox;
};
self.ToggleCardFilter = function(cardId) {
// toggle on-screen indicator
for (var c = 0; c < self.cards.length; c++)
if (self.cards[c].g_id == cardId)
self.cards[c].selected = !self.cards[c].selected;
var idx = $scope.transactionFilter.cards.indexOf(cardId);
if (idx == -1)
$scope.transactionFilter.cards.push(cardId);
else
$scope.transactionFilter.cards.splice(idx, 1);
self.applyFilterChange();
};