So definieren Sie ein Modell für dynamisch erstellte Kontrollkästchen in eckig

Question

Ich erstelle eine Tabelle von Benutzern, denen ich ein Kontrollkästchen in jeder Zeile hinzufügen und eine Schaltfläche zum Löschen. Wenn ich auf die Schaltfläche zum Löschen klicke, möchte ich alle ausgewählten Benutzer löschen.

Jetzt erstelle ich diese Benutzereinträge von einer API-Antwort, die mir sagt, ID, Name und E-Mail.

So sieht meiner Meinung nach etwas wie folgt aus:

<tr ng-repeat="user in MyCntrl.data.users track by $index"> 
    <td><input type="checkbox"></td> 
    <td>{{user.name}}</td> 
    <td>{{user.email}}</td> 
</tr> 

Was ich in meinem Controller wollen, ist ein Objekt mit der ID aller Benutzer haben, für die das Kontrollkästchen geklickt wurde.

Auch wenn ich ein Objekt erstellen und es als Modell für Kontrollkästchen zuweisen, wie füge ich einen Schlüssel als ID in diesem Objekt hinzu?

Answer 1

Sie einfach <input type="checkbox" ng-model="user.isSelected">

tun konnte Und dann filtern, dass nur MyCntrl.data.users für diejenigen, die isSelected === true

Answer 2

Wegen JavaScript dynamische Typisierung Natur haben, nichts hindert Sie daran, dem Hinzufügen eines Feldes namens ‚isSelected‘ (oder ähnlich) zu deine Modelle. Dann können Sie zu Ihrem checkbox Tag hinzufügen. Überprüfen Sie dann beim Löschen, welche Einträge isSelected auf true gesetzt haben und löschen Sie sie.

Answer 3

Hier ist ein Beispiel dafür, wie Sie alle ausgewählten Benutzer in einem anderen Array verfolgen können:

Beispiel:Plunker

<tr ng-repeat="user in MyCntrl.data.users track by $index"> 
    <td><input type="checkbox" ng-model="tempVar" ng-click="toggleSelection($index)"></td> 
    <td>{{user.name}}</td> 
    <td>{{user.email}}</td> 
</tr> 

<!-- AngularJS Code --> 
<script type="text/javascript"> 
var app = angular.module('myApp', []); 

app.controller('MyCtrl', function($scope) { 
    $scope.selectedUsers = []; // initially the selected users array is empty 
    $scope.toggleSelection = function(index){ 
    var positionInSelectedArray; 
    var arr = $scope.MyCntrl.data.users; 
    var tempUser = arr[index]; // refers to the selected user object in $scope.MyCntrl.data.users array (further, we'll call it "arr") 


    var userAlreadySelected = $scope.selectedUsers.filter(function(obj) { 
     return obj.userId == tempUser.userId; 
    })[0]; //checks whether the user is already selected or not (if selected, then returns the user object) 
    if (angular.isUndefined(userAlreadySelected)) { 
     $scope.selectedUsers.push(tempUser); //insert the object in array containing selected users 
    }else{ 
     positionInSelectedArray = $scope.selectedUsers.indexOf(userAlreadySelected); 
     $scope.selectedUsers.splice(positionInSelectedArray, 1); //removes the user object from array containing selected users 
    } 
    }; 
}); 
</script>