web-dev-qa-db-fra.com

Angular Obtenir les cases à cocher sélectionnées

J'ai une liste de cases à cocher remplies dynamiquement en utilisant angular. 

 <div ng-repeat="X in XList">
     <label>{{X.Header}}</label>
     <input type="checkbox" name="X" value="{{X.Item.Id}}" />
     <p>{{X.Header}}</p>
 </div>

Je veux une méthode pour récupérer une liste de toutes les cases à cocher sélectionnées. Habituellement j'utiliserais 

 $('input[name=checkboxlist]:checked').each(function()
{
}

Mais ce n'est pas acceptable avec angular .... Alors, existe-t-il une méthode appropriée pour le faire? 

javascriptangularjscheckboxcheckboxlist
15
Sana Joseph

voici la mise en oeuvre plunker

 <input type="checkbox" ng-model="selected[record.Id]"> {{record.Id}}

 $scope.ShowSelected = function() {
  console.log($scope.selected);
  alert(JSON.stringify($scope.selected));
};
15
Vinod Louis

Vous pouvez utiliser la directive ng-model pour lier directement une propriété à l'élément.

par exemple.

<input type="checkbox" ng-model="X.Item.Id" />

Cela mettra à jour votre modèle.

À partir de là, vous pourrez simplement vérifier les valeurs dans votre modèle et voir celles qui sont vérifiées.

par exemple.

angular.forEach($scope.yourModelItems, function(item){
    // item.value ? 0 : 1;
});

Consultez la documentation de ngModel . L’exemple de liste de tâches de la page angularjs.org home en est une illustration.

p.s. Sur une note de côté, vous pouvez également rendre vos directives angulaires html5 conviviales en ajoutant data- avant. par exemple. data-ng-model="X.Item.Id"

1
Tim B James
<tr ng-repeat="x in numbers" >
<td><input type="checkbox"  ng-model="selected[x.id]"></td>`<tr ng-repeat="x in numbers" >

puis bouton pour l'action 

 <button ng-click="get_all_cheked()">Get checked</button>

puis dans le contrôleur 

 $scope.selected = {};
 $scope.get_all_cheked=function () {
 console.log("click");
 console.log($scope.selected);
 }
0
Leo