Javascript 使用ANGULAR JS和Spring MVC在HTML中动态显示添加/删除操作的结果

我有一个员工表单，用户可以在其中添加员工详细信息，搜索员工详细信息并删除这些详细信息。我已经为控制器内的添加、搜索和删除操作编写了单独的函数。每当用户添加员工/删除员工时。我希望动态更新结果列表（添加的员工应显示在结果列表上，删除的员工不应显示在结果列表上）。我怎样才能做到这一点。例如，删除操作响应成功后，我是否应再次调用搜索功能。有没有其他方法可以做到这一点。我正在使用Angular JS和Spring MVC

这是我的搜索控制器代码

$http.post('http://localhost:8080/services/employee/search/'+Systems+"", searchCriteria)
.then(function(response) {
   $scope.searchresponse= [];
   $scope.searchresponse = response.data.items;
   if (response.data && response.data.items.length != 0) {
        $scope.searchresponse = response.data.items.map(function (x) {
            x.selected = false;
            return x;
        });
        console.log($scope.searchresponse);
   } 
   else {
        $scope.showerror = true;
        $scope.ErrorMsg ="There is no record matching your criteria."
   }
});

这是我对API的搜索响应

{
    "items": [{
       "employeeId": "ABC",
       "type": "D",
       "alive": "Yes"
    }, {
       "employeeId": "DEF",
       "type": "A",
       "alive": "Yes"
    }],
    "more": false
}  

这是我的控制器对删除的调用

 var data1=["ABC", "NPK"];
$http.delete('http://localhost:8080/services/employee/delete/'+Systems+"", {data:{"idList":data1},headers: {'Content-Type': 'application/json'}} )
.then(function(response) {
console.log("testing");
// - here i would like to implement code to remove all the fields that belong to eomployee id ABC,NPK from result page  
        });

---

我正在使用selectall/DecelectAll复选框为用户提供删除多个项目的选项

让我们假设您的

员工

具有

名称

和

id

属性，并且您有一些http资源uri来标识员工，例如

http://youservice/employees/123 

以及删除他/她的服务

在视图中，将员工列表显示为

<ul>
   <li ng-repeat="employee in employeeList track by employee.id">  
      {{employee.name}} <button ng-click="deleteEmployee(employee.id)">delete</button>
   </li>
</ul>

列表应在视图中刷新

---

更新
要从搜索结果中删除多个员工，您只需筛选搜索列表，例如（从代码中）：

---

假设您的

员工

具有

名称

和

id

属性，并且您有一些http资源uri来标识员工，例如

http://youservice/employees/123 

以及删除他/她的服务

在视图中，将员工列表显示为

<ul>
   <li ng-repeat="employee in employeeList track by employee.id">  
      {{employee.name}} <button ng-click="deleteEmployee(employee.id)">delete</button>
   </li>
</ul>

列表应在视图中刷新

---

更新
要从搜索结果中删除多个员工，您只需筛选搜索列表，例如（从代码中）：

用于从响应列表中删除数据

for (var i = 0; i < $scope.employeeList.length; i++) {
  if ($scope.employeeList[i].employeeId == employeeId) {
    $scope.employeeList.splice(i, 1);
    break;
  }
}

for（变量i=0；i<$scope.employeeList.length；i++）{
如果（$scope.employeeList[i].employeeId==employeeId）{
$scope.employeeList.splice（i，1）；
打破
}
}

看看

希望这有帮助

用于从响应列表中删除数据

for (var i = 0; i < $scope.employeeList.length; i++) {
  if ($scope.employeeList[i].employeeId == employeeId) {
    $scope.employeeList.splice(i, 1);
    break;
  }
}

for（变量i=0；i<$scope.employeeList.length；i++）{
如果（$scope.employeeList[i].employeeId==employeeId）{
$scope.employeeList.splice（i，1）；
打破
}
}

看看

---

---

希望这有帮助

如果要将这些员工存储在集合中，则可以在服务器的成功响应处理程序中，将其返回的新项添加到客户机上已有的集合中。删除时也可以执行同样的操作。只需将要删除的一个剪接即可。唯一需要注意的是，您永远不会知道客户端的后端是由其他用户以其他方式更改的，例如。到目前为止，您尝试了什么？您可以按照这个例子，现在我可以搜索和显示数据库中的结果，将员工插入数据库，从数据库中删除员工。当我执行删除操作时，即使从数据库中删除了员工，也不会从html中删除。我计划再次调用搜索操作，以便更新结果列表。这是一种很好的方法吗？你能发布你的代码吗？很容易确定问题。@NagaveerGowda我已经用我想要实现的目标更新了我的代码。现在请您看看。如果您将这些员工存储在一个集合中，在服务器的成功响应处理程序中，您只需将它返回的新项添加到您在客户端上已有的集合中即可。删除时也可以执行同样的操作。只需将要删除的一个剪接即可。唯一需要注意的是，您永远不会知道客户端的后端是由其他用户以其他方式更改的，例如。到目前为止，您尝试了什么？您可以按照这个例子，现在我可以搜索和显示数据库中的结果，将员工插入数据库，从数据库中删除员工。当我执行删除操作时，即使从数据库中删除了员工，也不会从html中删除。我计划再次调用搜索操作，以便更新结果列表。这是一种很好的方法吗？你能发布你的代码吗？这将很容易确定问题。@NagaveerGowda我已经用我想要实现的目标更新了我的代码，请您现在看看。谢谢您的评论，我已经更新了我的问题。你现在能帮我根据结果中的id拼接Employees吗？根据问题中的信息，他想从数组中拼接元素数组。此外，在您的

ng repeat

中，您可以传入

$index

，这样您以后就不必搜索它了。@Danny是的，这是一种可能性，有点简单。当我尝试此操作时，结果中的所有项目都被拼接出来，而不是仍然删除。。当我在empList上运行console.log时，我仍然可以看到该项目在里面。感谢您的评论，我已经更新了我的问题。你现在能帮我根据结果中的id拼接Employees吗？根据问题中的信息，他想从数组中拼接元素数组。此外，在您的

ng repeat

中，您可以传入

$index

，这样您以后就不必搜索它了。@Danny是的，这是一种可能性，有点简单。当我尝试此操作时，结果中的所有项目都被拼接出来，而不是仍然删除。。当我在empList上执行console.log操作时，我仍然能够看到该项目存在于其中