2013-08-07 17 views
15

Ho una lista di caselle di controllo riempite dinamicamente usando angolare.Angolare Ricevi caselle di controllo selezionate

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

Desidero un metodo per recuperare un elenco di tutte le caselle di controllo selezionate. solito Userei

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

Ma questo non è accettabile con angolare .... Così, c'è un metodo appropriato per farlo?

risposta

14

Ecco l'implementato plunker

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

$scope.ShowSelected = function() { 
    console.log($scope.selected); 
    alert(JSON.stringify($scope.selected)); 
}; 
+0

È fantastico, ma quando seleziono una delle caselle di controllo, viene visualizzato questo messaggio: Errore: impossibile convertire undefined nell'oggetto –

+0

Non riesco a ottenere quello che stai cercando di dire, puoi elaborare in quale condizione stai ricevendo l'errore? non vedo alcun errore durante la selezione delle caselle di controllo. –

+0

Sì, al tuo codice funziona benissimo, ma quando ho aggiunto "ng-model = selected []" al mio codice, quando provo a selezionare una delle checkbox, ricevo quell'errore. –

1

È possibile utilizzare la direttiva ng-model per associare direttamente una proprietà all'elemento.

ad es.

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

Questo aggiornerà il modello.

Da questo sarà possibile solo verificare i valori all'interno del modello e vedere quali sono controllati.

ad es.

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

Controllare la documentazione per ngModel. Anche l'esempio di elenco degli impegni nella home page di angularjs.org lo dimostra.

p.s. In una nota a margine, puoi anche rendere le tue direttive angolari HTML amichevoli aggiungendo data- in precedenza. per esempio. data-ng-model="X.Item.Id"

+0

Grazie mille, sarebbe possibile se hai nominato il metodo di controllo? –

+0

Dovresti pubblicare il codice del tuo modello in modo da poter vedere i valori. –

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

poi il pulsante per l'azione

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

e poi controller

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