ng-Klasse funktioniert nicht richtig für ausgewählte Kontrollkästchen

Question

Ich konfrontiert mit einem kleinen Problem im Zusammenhang mit ng-Klasse. Ich habe eine Liste mit Kontrollkästchen. Für diese Liste habe ich ng-Klasse als Nächstes eingerichtet, wenn das Kontrollkästchen aktiviert ist, legen Sie die benutzerdefinierte CSS-Klasse für das ausgewählte Element fest. Ich habe auch eine Checkbox "Select All", wenn ich auf dieses Feld klicke, CSS-Klasse für alle Elemente angewendet, aber wenn ich alle abwählen, ändert sich CSS-Klasse nicht für Elemente, die zuvor manuell ausgewählt wurden.

Ich erstellte plunker, um mein Problem zu zeigen.

Was fehlt mir und wo ist mein Fehler? Danke im Voraus.

html

<table class="table table-hover"> 
    <tr ng-class="{'selected': allCategoriesSelected, 'default': !allCategoriesSelected}"> 
     <td class="col-md-2"> 
      <input type="checkbox" ng-click="selectAllCategories()" > 
     </td> 
     <td class="col-md-10" ng-if="!allCategoriesSelected">Select all</td> 
     <td class="col-md-10" ng-if="allCategoriesSelected">Deselect all</td> 
    </tr> 
    <tr ng-repeat="category in categories | orderBy : 'id'" ng-class="{'selected': allCategoriesSelected, 'default': !allCategoriesSelected}" > 
     <td class="col-md-2"> 
      <input type="checkbox" ng-model="allCategoriesSelected" ng-click="updateCategory(category.id)"> 
     </td> 
     <td class="col-md-10">{{ category.name }}</td> 
    </tr> 
</table> 

js

$scope.selectedCategories = []; 
$scope.allCategoriesSelected = false; 
$scope.selectAllCategories = function() { 

    $scope.allCategoriesSelected = !$scope.allCategoriesSelected; 

}; 
$scope.updateCategory = function(categoryId) { 

    if ($scope.selectedCategories.indexOf(categoryId) > -1) { 
    $scope.selectedCategories.splice($scope.selectedCategories.indexOf(categoryId), 1); 

    } else { 
    $scope.selectedCategories.push(categoryId); 
    } 
}; 

Answer 1

Ich glaube, Sie es zu kompliziert machen. Dies kann leicht mit viel weniger Code gelöst werden. Hier ist ein funktionierender Plünder: https://plnkr.co/edit/xJz8pdRa4CBWUbdeYbyk?p=preview

Anstatt zu versuchen, ein separates Array zu erstellen, um ausgewählte Objekte zu verfolgen, legen Sie die ausgewählte Eigenschaft für das Array categories fest.

<table class="table table-hover"> 
    <tr ng-class="{'selected': allCategoriesSelected, 'default': !allCategoriesSelected}"> 
     <td class="col-md-2"> 
      <input type="checkbox" ng-model="allCategoriesSelected" ng-click="selectAllCategories()" > 
     </td> 
     <td class="col-md-10" ng-if="!allCategoriesSelected">Select all</td> 
     <td class="col-md-10" ng-if="allCategoriesSelected">Deselect all</td> 
    </tr> 
    <tr ng-repeat="category in categories | orderBy : 'id'" ng-class="{'selected': category.selected}" > 
     <td class="col-md-2"> 
      <input type="checkbox" ng-model="category.selected"> 
     </td> 
     <td class="col-md-10">{{ category.name }}</td> 
    </tr> 
</table> 

Wenn Sie die Markierung oben ändern, können Sie dies mit nur einer Methode erreichen.

$scope.allCategoriesSelected = false; 

    $scope.selectAllCategories = function() { 
    var selected = $scope.allCategoriesSelected ? true : false; 
    angular.forEach($scope.categories, function(category) { 
     category.selected = selected; 
    }); 
    }; 

Answer 2

Werfen Sie einen Blick auf this Plotter, sollte es funktionieren.

Dies ist der Controller:

$scope.selectAllCategories = function() { 

       if(!$scope.allCategoriesSelected) $scope.setAll(false); 
       else $scope.setAll(true); 

      }; 
      $scope.updateCategory = function() { 
       if($scope.checkedAll()) $scope.allCategoriesSelected = true; 
       else $scope.allCategoriesSelected = false; 
      }; 

      $scope.checkedAll = function(){ 
       var ret = true; 
       $scope.categories.forEach(function(item){ 
       if(!item.selected) ret = ret && false; 
       }); 
       console.log(ret); 
       return ret; 
      } 

      $scope.setAll = function(state){ 
       $scope.categories.forEach(function(item){ 
       item.selected = state; 
       }); 
      }