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

Question

我有一个员工表格，用户可以在其中添加员工详细信息，搜索员工详细信息并删除这些详细信息。我为 Controller 内部的添加，搜索和删除操作编写了单独的功能。每当用户添加员工/删除员工时。我希望将结果列表动态更新(应在结果列表中显示添加的员工，删除的员工不应在结果列表中显示)。我该如何实现这一目标。例如，在删除操作响应成功之后，我应该再次调用搜索功能吗？还有其他方法。我正在使用Angular JS和Spring MVC

这是我用于搜索的 Controller 代码

$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
}  

这是我的 Controller 调用delete

 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/DeSelect所有复选框来提供用户选项以删除多个项目

Answer 1

假设您的 employee 具有 name 和 id 属性，并且您有一些 http 资源 uri 来识别员工，例如

http://youservice/employees/123 

以及删除他/她的服务。

在您的 View 中，您将员工列表显示为

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

在您的 Controller 中，当用户按员工的删除按钮时调用的函数可以是

$scope.employeeList = [...];

$scope.deleteEmployee = function(employeeId) {
    let empUri = 'http://youservice/employees/'+employeeId;
    $http.delete(empUri).then(function(response) {
       // delete is successful, remove employee from the list 
       let empIndex = $scope.employeeList.findIndex(e => e.id === employeeId);
       $scope.employeeList.splice(empIndex, 1);
    }, function(responseError) {
       // delete is in error. Display an alert...
    });
}

列表应在 View 中刷新。

<小时/>

更新
为了从搜索结果中删除多名员工，您只需过滤搜索列表，例如(从您的代码中):

var data1=["ABC", "NPK"];
$http.delete(/* delete service url and data */).then(function(response) {
    // Filter out employees from data1  
    let empList = $scope.searchresponse.filter(emp => {
        // Is emp not in data1 ?
        return !data1.some(remEmpId => remEmpId == emp.employeeId);
    });
    $scope.searchresponse = empList;
});