AngularJs ngclass checkall boxes条件

Question

ユーザーが両方の選択を解除すると、すべてのボックスを自動的にチェックする方法を見つけることを試みています。 イメージに表示されているようにカードに2つのアイテムがあります。ユーザーが最初の選択を解除すると、もう1つのカードがチェックされ、ユーザーが2番目のカードを選択解除すると、それらを再び。

私は以下のコードを試してみましたが、それは

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-classを使用してチェックボックスの状態を管理することはできません。私はこれが

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; 
      } 




     }]); 

を助けるかもしれないと思う

：以下の私の解決策を確認してください