Cochez/ Décochez Toutes les cases - AngularJS ng-repeat

J'ai une structure qui ressemble à ceci: http://jsfiddle.net/deeptechtons/TKVH6/

<div>
<ul ng-controller="checkboxController">
    <li>Check All
        <input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
    </li>
    <li ng-repeat="item in Items">
        <label>{{item.Name}}
            <input type="checkbox" ng-model="item.Selected" />
        </label>
    </li>
</ul>
</div>

angular.module("CheckAllModule", [])
.controller("checkboxController", function checkboxController($scope) {


$scope.Items = [{
    Name: "Item one"
}, {
    Name: "Item two"
}, {
    Name: "Item three"
}];
$scope.checkAll = function () {
    if ($scope.selectedAll) {
        $scope.selectedAll = true;
    } else {
        $scope.selectedAll = false;
    }
    angular.forEach($scope.Items, function (item) {
        item.Selected = $scope.selectedAll;
    });

};


});

Lors de la vérification de tous est sélectionné ou désélectionné, toutes les autres cases sont sélectionnés. Mais quand "Check All" est sélectionné, et je décochez l'un des éléments, je veux "Vérifier Tout" pour être désélectionnés.

Merci d'avance!

(PS: Merci à deeptechtons pour le JSFiddle)

Celui qui downvoted la question, pourriez-vous s'il vous plaît laissez-moi savoir la raison? Il serait utile à l'avenir. Merci!

OriginalL'auteur Ramya | 2015-06-23

Si vous utilisez Angulaire de 1,3+ vous pouvez utiliser getterSetter de ng-model-options pour résoudre ce et éviter manuellement à garder la trace de la allSelected état

HTML:

<input type="checkbox" ng-model="allSelected" ng-model-options="{getterSetter: true}"/>

JS:

var getAllSelected = function () {
    var selectedItems = $scope.Items.filter(function (item) {
        return item.Selected;
    });

    return selectedItems.length === $scope.Items.length;
}

var setAllSelected = function (value) {
    angular.forEach($scope.Items, function (item) {
        item.Selected = value;
    });
}

$scope.allSelected = function (value) {
    if (value !== undefined) {
        return setAllSelected(value);
    } else {
        return getAllSelected();
    }
}

http://jsfiddle.net/2jm6x4co/

pour moi, c'est montrant comme filtre indéfini...

OriginalL'auteur rob

Vous pouvez utiliser cette fonction pour vérifier si tous les documents sont vérifiés à chaque fois qu'une case à cocher changements:

$scope.checkStatus= function() {
            var checkCount = 0;
            angular.forEach($scope.Items, function(item) {
                 if(item.Selected) checkCount++;
            });
                $scope.selectedAll = ( checkCount === $scope.Items.length);
        };

Le code de la vue:

<input type="checkbox" ng-model="item.Selected" ng-change="checkStatus();"/>

http://jsfiddle.net/TKVH6/840/

Désolé, je voulais éditer le mien, mais j'ai accidentellement modifiées le vôtre. Ai-je revenir vers la droite jsFiddle lien?
Pas de problème, merci pour la fixation.

OriginalL'auteur Kmart2k1

de travail exemple: http://jsfiddle.net/egrendon/TKVH6/845/

vue:

<input type="checkbox" ng-model="item.Selected" ng-click="setCheckAll(item)" />

contrôleur:

angular.module("CheckAllModule", [])
    .controller("checkboxController", function checkboxController($scope) {


    $scope.Items = [{
        Name: "Item one"
    }, {
        Name: "Item two"
    }, {
        Name: "Item three"
    }];
    $scope.checkAll = function () {
        if ($scope.selectedAll) {
            $scope.selectedAll = true;
        } else {
            $scope.selectedAll = false;
        }
        angular.forEach($scope.Items, function (item) {
            item.Selected = $scope.selectedAll;
        });

    };

    $scope.setCheckAll = function (item) {
        //
        //Check if checkAll should be unchecked
        //
        if ($scope.selectedAll && !item.Selected) {
            $scope.selectedAll = false;
        } 
        //
        //Check if all are checked.
        //
        var checkCount = 0;
        angular.forEach($scope.Items, function(item) {
            if(item.Selected) checkCount++;
        });
        $scope.selectedAll = ( checkCount === $scope.Items.length);
    };

});

OriginalL'auteur Ernesto Rendon

Ici est une superbe façon de le faire

http://jsfiddle.net/TKVH6/850/

Utiliser un peu de undescore (il suffit de le réduire) et ng-vérifié

  <input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" ng-checked="allSelected()"/>


   $scope.allSelected = function () {
      var allSelect = _.reduce($scope.Items, function (memo, todo) {
          return memo + (todo.Selected ? 1 : 0);
        }, 0);
      return (allSelect === $scope.Items.length);
  };

Vous pouvez utiliser le javascript intégré .réduire si vous ne souhaitez pas utiliser le trait de soulignement.

OriginalL'auteur ajmajmajma

Cette réponse est la même logique pour Kmart2k1 réponse. Il met la responsabilité de mettre à jour le maître de case à cocher sur chaque enfant dans le ng-repeat. Au lieu d'utiliser array.forEach, j'utilise array.certains plus rapidement vérifier si tout des éléments non sélectionnés.

HTML:

<li ng-repeat="item in Items">
    <label>{{item.Name}}
        <input type="checkbox" ng-model="item.Selected" ng-change="notifyMaster()"/>
    </label>
</li>

Javascript

$scope.notifyMaster = function () {
    $scope.selectedAll = !$scope.Items.some(function (item) {
       return !item.Selected;  //check if ANY are unchecked
    });
}

Fourche violon

OriginalL'auteur ryanyuyu

Vous devez vous connecter pour publier un commentaire.