Question

我试图在用户取消选中时自动检查所有框。

为清楚起见，图片中显示的卡片中有两个项目，最初选择卡片，当用户取消选择第一个卡片，然后检查另一张卡片，然后当用户取消选择时第二个，它应该自动再次选择它们。

这是我到目前为止所做的事情：

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)}}">&nbsp;</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();
 };

Answer 1

你可以简单。首先添加当前检查计数变量

// and accept the full card not the card id  
 self.ToggleCardFilter = function(card) {
     // 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;
    if($scope.transactionFilter.cards.length){
       card.selected = !card.selected;
     }else{
       for(var i = 0 ; i < self.cards.length ; i++){
          self.cards[i].selected = true;
        }
      }

     var idx = $scope.transactionFilter.cards.indexOf(card.g_id);
     if (idx == -1)
         $scope.transactionFilter.cards.push(cardId.g_id);
     else
         $scope.transactionFilter.cards.splice(idx, 1);

     self.applyFilterChange();
 };

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)">

            <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)}}">&nbsp;</span></div>
            </div>

AngularJS切换选中的框

1 个答案: