選択したチェックボックスでng-classが正常に動作しない

Question

ng-classに関連する小さな問題に直面しました。私はチェックボックスのリストを持っています。このリストでは、次の方法でng-classを設定します。チェックボックスをオンにすると、選択したアイテムのカスタムCSSクラスを設定します。また、私はこのボックスをクリックすると、すべての項目に適用されるcssクラスがチェックされていますが、すべてを選択解除すると、cssクラスは前に手動で選択された項目に対して変更されません。

私は自分の問題を示すためにplunkerを作成しました。

私の欠点は何ですか？私のミスはどこですか？前もって感謝します。私はあなたはそれがあまりにも複雑作っていると思います

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

。これは、はるかに少ないコードで簡単に解決できます。 https://plnkr.co/edit/xJz8pdRa4CBWUbdeYbyk?p=preview

選択した項目を追跡するために別の配列を作成するのではなく、categories配列でselectedプロパティを設定するだけです。

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

上記のマークアップを変更すると、1つの方法でこれを達成できます。

$scope.allCategoriesSelected = false; 

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

Answer 2

plankerを参照してください、それは動作するはずです。

これはコントローラです：

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