Question

我遇到了与ng-class相关的小问题。我有一个复选框列表。对于此列表，我在下一步设置了ng-class，如果选中了复选框，则为所选项设置自定义css类。另外我有一个复选框“Select All”，如果我点击这个框，css类申请了所有项目，但是当我取消选择all时，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

只需在类别数组上设置所选属性，而不是尝试创建单独的数组来跟踪所选项目。

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

Answer 2

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

对于选中的复选框，ng-class无法正常工作

2 个答案: