ng-class 对于选中的复选框不能正常工作答案

【问题标题】：ng-class doesn't work properly for selected checkboxng-class 对于选中的复选框不能正常工作
【发布时间】：2017-01-16 14:25:56
【问题描述】：

我遇到了一个与 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>

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

【问题讨论】：

plunker还有一个问题：如果选择单个类别然后选择所有类别，则类别设置正确但未选中复选框。只是 plunker 的问题还是您的代码中也有问题？
@Jon_Snow 固定插件
您希望之前选择的项目在单击“取消全选”时变为未选中状态，还是只想更改类？
@JoelCDoyle 我希望通过单击“取消全选”将先前选择的项目与班级一起取消选中

标签： javascript html css angularjs ng-class

【解决方案1】：

看看this plunker，它应该可以工作。

这是控制器：

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

【讨论】：

【解决方案2】：

我认为你把它弄得太复杂了。这可以用更少的代码轻松解决。这是一个工作的 plunker：https://plnkr.co/edit/xJz8pdRa4CBWUbdeYbyk?p=preview

不要尝试创建一个单独的数组来跟踪所选项目，只需在类别数组上设置 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>

更改上面的标记，只需一种方法即可完成。

  $scope.allCategoriesSelected = false;

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

【讨论】：