Binding Kontrollkästchen Auswahl innerhalb ng-Wiederholung Tabelle mit Filter

Question

Ich versuche, Kontrollkästchen für die Auswahl von Tabellenzeilen zu implementieren. Die Tabelle wird mit ng-repeat erstellt, und ich möchte eine Texteingabe einschließen, um die Tabelle zu filtern. Wenn ein Kontrollkästchen ausgewählt ist, wird die ID für dieses Element an ein Array gesendet und es wird entfernt, wenn das Kontrollkästchen deaktiviert ist. Mein Problem ist, dass nach dem Manipulieren des Filters die Kontrollkästchen nicht aktiviert bleiben. Wie binde ich die Kontrollkästchen korrekt an mein Array?

Plunk - https://plnkr.co/edit/U0N3vDTZAULC6CFIdhVp?p=preview

HTML:

<tr ng-repeat="name in names | filter: search"> 
     <td> 
     <input type="checkbox" class="input-sm" ng-checked="selectedNames.indexOf(name.id) > -1" ng-click="addName(name.id)"/> 
     </td> 
     <td>{{name.name}}</td> 
     <td>{{name.age}}</td> 
    </tr> 

JS:

$scope.addName = function (id) { 
    var idx = selectedNames.indexOf(id); 
    if (selectedNames.indexOf(id) == -1) { 
     console.log('Pushing: ', id) 
     selectedNames.push(id); 
     console.log(selectedNames); 
    } else { 
     selectedNames.splice(idx,1); 
     console.log(selectedNames); 
    } 

Answer 1

Ich habe den Code ein wenig geändert, und jetzt funktioniert es gut. Hier ist der Arbeitstrupp. https://plnkr.co/edit/8Jg9hvxibYhVV89Q0bts?p=preview

Dieser Code wurde in Controller hinzugefügt:

$scope.checkSelected= function(id){ 
    var idx = selectedNames.indexOf(id); 
    return idx > -1; 
    } 

Und ich änderte Ihr ng überprüfen Ausdruck:

<input type="checkbox" class="input-sm" ng-checked="checkSelected(name.id)" ng-click="addName(name.id)" /> 

Answer 2

Was würde ich empfehlen, es Ihre Checkbox Eingang zu nehmen und Bindung es tatsächlich zum Modell ng-Modell :

<input ng-model="name.checked" type="checkbox" class="input-sm"/> 

Auf diese Weise, wenn Sie das Element überprüfen, bleibt es mit dem Array names egal, was Sie tun, ob es um es bewegt oder Elemente hinzufügen oder die Tabelle zu regenerieren, behält das Element sein name.checked Attribut. Das Problem ist jedoch, dass Sie das Attribut nicht mit ng-model verwenden können. Um dies zu beheben, müssen wir Ihr selectedNames Array ändern, damit es berechnet wird, wenn es benötigt wird.

Sagen Sie bitte Ihre selectedNames Array benötigen:

//First, inject the $filter object into your angular controller 
$scope.getSelected = function() { 
    return $filter('filter')($scope.names, {checked: true}); // Or something along these lines. I'm just typing this into stack overflow so I haven't tested it. 
} 

Nun, Sie müssen nicht jedes Mal ein Skript rufen Sie einen Namen auswählen. Es wird abgerufen, wenn Sie die ausgewählten Elemente benötigen.

Hinweis: Sie können auch ng-true-value und ng-false-value verwenden, um zu ändern, was die wahren/falschen Werte sind, wenn das Kontrollkästchen aktiviert/nicht aktiviert ist.