Angular在ng-repeat（MEAN-Stack）中传递错误的对象

Question

I am building a platform to manage exams for my institute. I use the MEAN-Stack.

Everything works fine except for deleting a "klausur" (german for exam). The Code is below. If i click the last link (using the "deleteKlausur(klausur)" click) on any object of the table, not the momentary object, but the last of my one is deleted inside of my table. Inside of the DB, the right one is deleted. If i then click on the same button again, the server breaks down and because it tries to delete the same ID again, giving me a problem concerning a null object.

<table class="table table-hover table-striped">
            <thead>
            <th>ID</th>
            <th>Name</th>
            <th>Datum</th>
            <th>Semester</th>
            <th>Aufgabenzahl</th>
            <th>Teilnehmer</th>
            <th>Aktionen</th>
            </thead>
            <tbody>
            <tr ng-repeat="klausur in klausuren">
                <td>{{klausur._id}}</td>
                <td>{{klausur.name}}</td>
                <td>{{klausur.gehaltenAm | date:'dd.MM.yy'}}
                    <br/>{{klausur.gehaltenAm | date:'H:mm'}}
                </td>
                <td>{{klausur.semester}}</td>
                <td>{{klausur.aufgaben.length}}</td>
                <td>{{klausur.teilnehmer.length}}</td>
                <td><a href="#/klausuren/{{klausur._id}}/edit" class="btn btn-default" style="width:100%">Klausur
                    ändern</a><br/>
                    <a href="" ng-click="deleteKlausur(klausur)" class="btn btn-danger" style="width:100%">Klausur löschen</a></td>
            </tr>
            </tbody>

My JS (using Angular) script is as following:

app.controller('KlausurListController', function ($scope, $http) {
$http.get('http://localhost:3000/klausuren').success(function (response) {
    $scope.klausuren = response;
}).error(function (err) {
    $scope.error = err;
});

$scope.deleteKlausur = function (klausur) {
    $http.delete('http://localhost:3000/klausuren/'+ klausur._id).success(function(res){
        $scope.klausuren.pop(klausur);
    });
}});

Thank you , even for reading the whole thing! Hope you can help!

Answer 1

You are using pop() which only removes the last element in an array.

To remove the correct one you need to find it's index in array and use splice()

$scope.deleteKlausur = function (klausur) {
    $http.delete('http://localhost:3000/klausuren/'+ klausur._id).success(function(res){
        var index = $scope.klausuren.indexOf(klausur);
        if(index !== -1){
           $scope.klausuren.splice(index,1);
        }            
    });
}});