如何使用javascript从数组中删除特定行？

Question

I have a problem on deleting a table row data by using JavaScript splice() method. But i cant delete the data in the meanwhile delete the first and last row of the array.

$scope.StudentDetails is my array which contains all the data like id,name,dept,age,address.,

$scope.deleteData = function (item)
{
    var index = $scope.StudentDetails.indexOf(item);
    if (index > -1)
    {
        $scope.StudentDetails.splice(index, 1);
    }
};

in the first image i will click delete .then it show below image ..but not delete the exact data. i am using above coding.

using below code load my data and push to the array and populate the date in the table elements.

$scope.Load = function ()
{
    $scope.StudentDetails = [];
    $http({ method: 'GET', url: '/Home/GetStudentDetails' }).success(function (data)
    {
        if (data != null)
        {
            $.each(data.Data, function (index, value)
            {
                $scope.StudentDetails.push(value);
            });

            // $scope.checked = false;
        }
    }).error(function ()
    {
        alert("Failed");
    });
}

Please help anybody!!! Thanks In advance!!!

Answer 1

I suggest wiring up your delete something like this (this is assuming you are using an ng-repeat for the students):

<a data-ng-click="deleteStudent($index)">delete</a>

And then in your controller

$scope.deleteStudent = funciton(index){
    $scope.studentDetails.splice(index, 1);
};

The real problem with your question is that

var index = $scope.StudentDetails.indexOf(item);

Does not work like you are expecting, it doesn't look through an array of objects for an object.

Answer 2

It makes no sense to delete the entry in your scope, since it's coming from a ajax source. It might not be present in your scope anymore, but the next time you open the page $scope.Load() will just reload the data source. You need to write an ajax handler that is capable to delete a student from your, db/json file or wherever_your_data_is stored. Write your delete function like this:

$scope.deleteData = function (item){
    $http({ method: 'GET', url: '/Home/DeleteStudent'/'+ $routeParams.item }).success(function (data)
    {
       //After succesfull deletion reload the changed scope
        $scope.Load();
    });
};

and call it from your html like this:

<td><a ng-click="deleteData(your_id_for_this_item)">delete</a> </td>

Angular will automaticly update your scope an the dom