ng-class對於選定的複選框無法正常工作

我遇到了一個與ng-class相關的小問題。我有一個複選框列表。對於這個列表，我下一步設置ng-class，如果複選框被選中，爲所選項設置自定義css類。此外，我有一個複選框「全選」，如果我點擊這個框，css類申請所有項目，但是當我全部取消選擇時，對於之前手動選擇的項目，css類不會改變。ng-class對於選定的複選框無法正常工作

我創建了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>

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

來源

2016-09-08 antonyboom

的plunker有另外一個問題：如果你選擇一個類別，然後選擇所有類別，該類設置正確，但複選框不檢查。只是一個問題，或者在你的代碼中也是一個問題？ –

@Jon_Snow fixed plunker – antonyboom

當您點擊「全部取消選擇」或者您只希望課程改變時，您是否希望以前選中的項目變得不被選中？ –

我認爲你是使它過於複雜。這可以通過更少的代碼輕鬆解決。這裏是一個工作plunker：https://plnkr.co/edit/xJz8pdRa4CBWUbdeYbyk?p=preview

而不是試圖做一個單獨的數組來跟蹤選定的項目，只需設置類別數組選定的屬性。

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

更改上面的標記，只允許使用一種方法完成此操作。

$scope.allCategoriesSelected = false; 

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

來源

2016-09-08 16:37:50

看看this蹲跳，它應該工作。

這是控制器：

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

來源

2016-09-08 16:42:45

ng-class對於選定的複選框無法正常工作

回答

相關問題