AngularJs ngclass checkall boxes условия

Question

Я пытаюсь найти путь через условия ngclass, чтобы автоматически проверять все поля, когда пользователь отменяет их выбор. , чтобы сделать это ясно, на карте изображены два элемента, как показано на изображении, когда пользователь сначала отменит выбор, затем будет проверена другая карта, а затем, когда пользователь отменит выбор второго, он должен автоматически выбрать оба их снова.

Я попытался код ниже, но это не дало желаемого результата

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 || singleCard [0].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> 





     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; 

      // store card status to filter 
      var idx = $scope.transactionFilter.cards.indexOf(cardId); 
      if (idx == -1) 
       $scope.transactionFilter.cards.push(cardId); 
      else 
       $scope.transactionFilter.cards.splice(idx, 1); 

      self.applyFilterChange(); 
     }; 

здесь функции, которые отображают результат для карт, даже если оба из них не выбран

 DatabaseFactory.GetAllFromDB("Card").then(function(result) { 
    self.cards.length = 0; 
    if (result.rows.length > 0) { 
    var addAllCardsToFilter = false; 
    // first time and when all cards are deselected 
    if ($scope.transactionFilter.cards.length === 0) 
     addAllCardsToFilter = true; 

    for (var r = 0; r < result.rows.length; r++) { 
     self.cards.push(result.rows.item(r)); 
     // initial fill and when all card were deselected - avoid empty display 
     if (addAllCardsToFilter) 
      $scope.transactionFilter.cards.push(self.cards[r].g_id); 

     if ($scope.transactionFilter.cards.indexOf(self.cards[r].g_id) > -1) 
      self.cards[r].selected = true; 


    } 
} 
}); 

Answer 1

Проверено состояние, так что вы не можете управлять состоянием флажка с помощью ng-класса. Пожалуйста, проверьте мое решение ниже:

Я думаю, что это могло бы помочь

HTML часть

<div ng-app="myApp" ng-controller="CheckBoxController"> 
<input type="checkbox" ng-model="stateOption1" ng-change="changeTracker(stateOption1)">Option1 
<input type="checkbox" ng-model="stateOption2" ng-change="changeTracker(stateOption2)">Option2 
</div> 

JavaScript Часть

var myApp = angular.module('myApp',[]); 



myApp.controller('CheckBoxController', ['$scope', function($scope) { 
      $scope.stateOption1 = true; 
      $scope.stateOption2 = true; 

      $scope.changeTracker = function(value) 
      { 
       if(!($scope.stateOption1 || $scope.stateOption2)) 
        { 
         $scope.stateOption1 = true; 
         $scope.stateOption2 = true; 
        } 
        return value? false: true; 
      } 




     }]);