Javascript 如何使用angularjs从表中删除特定行？

我正在做这个Angularjs桌子。当我删除一个客户（单击删除）时，特定的客户会离开，这很好：）。但是假设我搜索一个特定的客户，比如Alex在搜索框中键入Alex，然后我想删除它，但是出于某种原因，我的removePerson函数将目标锁定在表中的第一个客户。请告诉我在removePerson函数中我做错了什么。非常感谢

这是我的代码：

var App = angular.module('sortApp', ['ui.bootstrap'])

App.controller('mainController', function($scope, $modal, $log, $filter) {

$scope.sortType     = 'id'; // set the default sort type
$scope.sortReverse  = false;  // set the default sort order
$scope.searchPerson  = '';     // set the default search/filter term

// Array - List of People   
$scope.People = [
{ id: 1, name: 'Mike', Lastname: 'White', age: 26 },
{ id: 2, name: 'Carl', Lastname: 'Barns', age: 41 },
{ id: 3, name: 'Deb', Lastname: 'McDonals',age: 78 },
{ id: 4, name: 'Tommy', Lastname: 'Humbs', age: 32 },
{ id: 5, name: 'Mary', Lastname: 'Browns', age: 18 },
{ id: 6, name: 'Alex', Lastname: 'Sams', age: 50 },
{ id: 7, name: 'Beto', Lastname: 'Burns', age: 27 }
];  
/*
This function adds a new customer
*/
$scope.addPerson = function(){
var customer = {
    name: $scope.name,
    Lastname: $scope.Lastname,
    age: $scope.age,
};

$scope.People.push(customer);
};
/*
This function removes a customer
*/
$scope.removePerson = function(index){

if(confirm("Are you sure to remove Customer")){
        $scope.People.splice(index, 1);
    }
 };  
 $scope.openPopupScreen = function() {

 var modalInstance = $modal.open({
  template: '<div class="modal-header">   <a class="close" data- dismiss="modal" ng-click="cancel()"><i class="fa fa-times-circle-o" style="margin:10px;color:black;font-size:35px;"></i></a><h1>Add Customer</h1></div><div class="modal-body">    <form >' +
    ' <label class="col-sm-3 control-label no-padding-right ng-binding">NAME:</label><input style = "width:300px;"type="text" class="form-control ng-scope ng-pristine ng-valid" ng-model="person.name"></br>' +
    ' <label class="col-sm-3 control-label no-padding-right ng-binding">LASTNAME:</label><input style = "width:300px;" type="text" class="form-control ng-scope ng-pristine ng-valid" ng-model="person.Lastname"></br>' +
    ' <label class="col-sm-3 control-label no-padding-right ng-binding">AGE:</label><input style = "width:300px;" type="number"class="form-control ng-scope ng-pristine ng-valid" ng-model="person.age"></br>' +
    ' <button id = "myid" type="button" class="btn btn-success" ng-click="add()"><i class="ace-icon fa fa-check"></i>Add New Customer</button>' +
    '  <button type="reset" class="btn ">Clear</button>' +
    '<div ng-hide = "error_name_message" id="Error_Message_name">'+
    '<p>Please enter a name</p>'+
  '</div>'+
  '<div ng-hide = "error_lastname_message" id="Error_Message_Lastname">'+
    '<p>Please enter a lastname</p>'+
  '</div>'+
  '<div ng-hide = "error_age_message" id="Error_Message_Age">'+
    '<p>Please enter age</p>'+
  '</div>'+
    ' </form>' +
    '</div>' +
    '<div class="modal-footer">' +
    '  <a data-dismiss="modal" aria-hidden="true" class="btn btn-primary" ng-click="cancel()">close</a>' +
    '</div>',
  controller: ModalInstanceCtrl
});
modalInstance.result.then(function (newPerson) {
  $scope.People.push(newPerson);
});
};

var ModalInstanceCtrl = function($scope, $modalInstance) {
$scope.person = {name: '', Lastname: '', age: ''};
$scope.error_name_message = true;
$scope.error_lastname_message = true;
$scope.error_age_message = true;


$scope.ok = function() {
$modalInstance.close($scope.selected.item);
};

$scope.cancel = function() {
$modalInstance.dismiss('cancel');
};

$scope.add = function() {
//Pass newPerson to caller from main controller
if($scope.person.name === ""){  

$scope.error_name_message= false;
  $("#Error_Message_name").show().delay(1900).fadeOut(900); // don't leave error on screen for long
}
else if($scope.person.Lastname === ""){  
  $scope.error_lastname_message = false;
  $("#Error_Message_Lastname").show().delay(1900).fadeOut(900); // don't leave error on screen for long
}
else if($scope.person.age === "" || $scope.person.age < 1){  
  $scope.error_age_message = false;
  $("#Error_Message_Age").show().delay(1900).fadeOut(900); // don't leave error on screen for long
}
else{
$modalInstance.close($scope.person);
}
};
};

});

var-App=angular.module（'sortApp'，['ui.bootstrap']））
App.controller（'mainController'，函数（$scope、$modal、$log、$filter）{
$scope.sortType='id'；//设置默认排序类型
$scope.sortReverse=false；//设置默认排序顺序
$scope.searchPerson=''；//设置默认搜索/筛选条件
//数组-人员列表
$scope.People=[
{id:1，姓名：'Mike'，姓：'White'，年龄：26}，
{id:2，姓名：'Carl'，姓氏：'Barns'，年龄：41}，
{id:3，姓名：'Deb'，姓氏：'McDonalds'，年龄：78}，
{id:4，姓名：'Tommy'，姓氏：'Humbs'，年龄：32}，
{id:5，姓名：'Mary'，姓氏：'Browns'，年龄：18}，
{id:6，姓名：“Alex”，姓氏：“Sams”，年龄：50}，
{id:7，姓名：'Beto'，姓氏：'Burns'，年龄：27}
];  
/*
此函数用于添加新客户
*/
$scope.addPerson=函数（）{
var客户={
名称：$scope.name，
Lastname:$scope.Lastname，
年龄：$scope.age，
};
$scope.People.push（客户）；
};
/*
此函数用于删除客户
*/
$scope.removePerson=函数（索引）{
如果（确认（“您确定要删除客户”））{
$scope.People.splice（索引1）；
}
};  
$scope.openPopupScreen=function（）{
var modalInstance=$modal.open({
模板：“添加客户”+
'名称：
'+
'姓氏：
'+
'年龄：
'+
“添加新客户”+
“清楚”+
''+
“请输入一个名称”+
''+
''+
“请输入姓氏”+
''+
''+
“请输入年龄”+
''+
' ' +
'' +
'' +
“结束”+
'',
控制器：ModalInstanceCtrl
});
modalInstance.result.then（函数（newPerson）{
$scope.People.push（newPerson）；
});
};
var ModalInstanceCtrl=函数（$scope，$modalInstance）{
$scope.person={name:''，Lastname:''，年龄：'}；
$scope.error\u name\u message=true；
$scope.error\u lastname\u message=true；
$scope.error\u age\u message=true；
$scope.ok=函数（）{
$modalInstance.close（$scope.selected.item）；
};
$scope.cancel=函数（）{
$modalInstance.disclose（'cancel'）；
};
$scope.add=函数（）{
//将newPerson从主控制器传递给调用方
如果（$scope.person.name==“”）{
$scope.error\u name\u message=false；
$（“#错误#消息_名称”）.show（）.delay（1900）.fadeOut（900）；//不要在屏幕上长时间保留错误
}
else如果（$scope.person.Lastname==“”）{
$scope.error\u lastname\u message=false；
$（“#Error#Message_Lastname”）.show（）.delay（1900）.fadeOut（900）；//不要在屏幕上长时间保留错误
}
else如果（$scope.person.age==“”| |$scope.person.age<1）{
$scope.error\u age\u message=false；
$（“#错误(消息)”）.show（）.delay（1900）.fadeOut（900）；//不要在屏幕上长时间保留错误
}
否则{
$modalInstance.close（$scope.person）；
}
};
};
});

发生这种情况是因为您传递的是显示元素数组的索引键，该索引键与原始数组不同。你可以用不同的方法解决这个问题。这里提出的方案应该有效。希望能有帮助

将removePerson功能更改为：

$scope.removePerson = function(index){
    if(confirm("Are you sure to remove Customer")){
        angular.forEach($scope.People, function(value, key) {
            if (value.id === index){
                $scope.People.splice(key, 1);
            }
        });
    }
};  

并将人员id从HTML传递给函数：

<button type="button" class="btn btn-danger fa fa-trash-o" ng-click="removePerson(people.id)"></button>

---

发生这种情况是因为您传递的是显示元素数组的索引键，该索引键与原始数组不同。你可以用不同的方法解决这个问题。这里提出的方案应该有效。希望能有帮助

将removePerson功能更改为：

$scope.removePerson = function(index){
    if(confirm("Are you sure to remove Customer")){
        angular.forEach($scope.People, function(value, key) {
            if (value.id === index){
                $scope.People.splice(key, 1);
            }
        });
    }
};  

并将人员id从HTML传递给函数：

<button type="button" class="btn btn-danger fa fa-trash-o" ng-click="removePerson(people.id)"></button>

---

发生这种情况是因为您传递的是显示元素数组的索引键，该索引键与原始数组不同。你可以用不同的方法解决这个问题。这里提出的方案应该有效。希望能有帮助

将removePerson功能更改为：

$scope.removePerson = function(index){
    if(confirm("Are you sure to remove Customer")){
        angular.forEach($scope.People, function(value, key) {
            if (value.id === index){
                $scope.People.splice(key, 1);
            }
        });
    }
};  

并将人员id从HTML传递给函数：

<button type="button" class="btn btn-danger fa fa-trash-o" ng-click="removePerson(people.id)"></button>

---

发生这种情况是因为您传递的是显示元素数组的索引键，该索引键与原始数组不同。你可以用不同的方法解决这个问题。这里提出的方案应该有效。希望能有帮助

将removePerson功能更改为：

$scope.removePerson = function(index){
    if(confirm("Are you sure to remove Customer")){
        angular.forEach($scope.People, function(value, key) {
            if (value.id === index){
                $scope.People.splice(key, 1);
            }
        });
    }
};  

并将人员id从HTML传递给函数：

<button type="button" class="btn btn-danger fa fa-trash-o" ng-click="removePerson(people.id)"></button>

我在Chrome中可以正常使用，删除也可以正常使用。可以，但如果从搜索框中搜索客户，然后尝试删除，则无法正常使用。无论如何，我能解决这个问题。无论如何谢谢你！抱歉，我本来可以把问题读得更清楚一点的。很高兴你找到了答案。在Chrome中，它对我来说很好，按预期删除。是的，它可以工作，但如果你从搜索框中搜索客户，然后尝试删除它，则无法工作。无论如何，我能解决这个问题。无论如何谢谢你！抱歉，我本来可以把问题读得更清楚一点的。很高兴你找到了答案。在Chrome中，它对我来说很好，按预期删除。是的，它可以工作，但如果你从搜索框中搜索客户，然后尝试删除它，则无法工作。无论如何，我能解决这个问题。无论如何谢谢你！抱歉，我本来可以把问题读得更清楚一点的。很高兴你找到了答案。在Chrome中，它对我来说很好，按预期删除。是的，它可以工作，但如果你从搜索框中搜索客户，然后尝试删除它，则无法工作。无论如何，我能解决这个问题。无论如何谢谢你！抱歉，我本来可以把问题读得更清楚一点的。很高兴你找到了答案。非常感谢Daniele，它很有效！！我有一个简短的问题。我还需要能够编辑客户信息。我不是