ng-класс не работает должным образом для выбранного флажка

Я столкнулся с небольшой проблемой, связанной с ng-class. У меня есть список флажков. Для этого списка я настраиваю ng-класс следующим образом, если установлен флажок, устанавливаю собственный класс 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);
  }
};

javascript html css angularjs ng-class
person antonyboom    schedule 08.09.2016    source источник
comment
у планкера другая проблема: если вы выбираете одну категорию, а затем выбираете все категории, класс устанавливается правильно, но флажки не устанавливаются. это проблема только плункера или проблема и в вашем коде?   -  person Andre.Anzi    schedule 08.09.2016
comment
@Jon_Snow исправлен плункер   -  person antonyboom    schedule 08.09.2016
comment
Вы хотите, чтобы элементы, которые были выбраны ранее, становились неотмеченными при нажатии кнопки «Отменить выбор всего», или вы хотите изменить только класс?   -  person Pop-A-Stash    schedule 08.09.2016
comment
@JoelCDoyle Я хочу, чтобы элементы, которые были выбраны ранее, становились неотмеченными вместе с классом, нажав «Отменить выбор всего».   -  person antonyboom    schedule 08.09.2016

Ответы (2)


arrow_upward
0
arrow_downward

Взгляните на этот плункер, он должен работать.

Это контроллер:

$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;
              });
            }
person Andre.Anzi    schedule 08.09.2016

arrow_upward
0
arrow_downward

Мне кажется, вы слишком все усложняете. Это может быть легко решено с гораздо меньшим количеством кода. Вот рабочий планкер: 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;
    });
  };
person Pop-A-Stash    schedule 08.09.2016