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

Checked是一种状态，因此您无法使用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;
            }




        }]);

AngularJs ngclass checkall box条件

1 个答案: