Question

您好我在我的客户端使用angularJs。我有一个视图，用户可以添加和删除这样的项目：

app.controller('demoController', function($scope) {
    // initial items
    $scope.items = [
        'item one',
        'item two',
        'item three'
    ];

    // add an item
   $scope.add = function() {
       $scope.items.push($scope.input);
   };

    // remove an item
    $scope.remove = function(index) {
        $scope.items.splice(index, 1);
    };`enter code here`
});

当用户完成时，我希望他点击一个按钮。之后我将所有添加和删除的项目发送到服务器以更新数据库。我无法在每次点击时执行此操作，因为我需要所有信息来填写服务器部分中的电子邮件。我知道如何删除和添加项目，但我不知道如何找到已删除的项目并添加项目并将其发送到服务器。请任何人知道我该怎么做？非常感谢。

Answer 1

只使用1个数组即可完成。您只需创建一个新的属性并将其设置为true - 如果已删除 - ，否则为false。

然后在后端中，您可以获取访问此属性的所有已删除项目。

请参阅下面的示例：

(function() {
  'use strict';

  angular
    .module('app', [])
    .controller('demoController', demoController);

  demoController.$inject = ['$scope'];

  function demoController($scope) {
    // initial items
    $scope.items = [  
       {  
          "name":"item one",
          "removed":false
       },
       {  
          "name":"item two",
          "removed":false
       },
       {  
          "name":"item three",
          "removed":false
       }
    ];

    // add an item
    $scope.add = function() {
      $scope.items.push({
        "name": $scope.input,
        "removed": false
      });
    };

    // remove an item
    $scope.remove = function(index) {
      $scope.items[index].removed = !$scope.items[index].removed;
    };
  }
})();

<!DOCTYPE HTML>
<html ng-app="app">

<head>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.6/css/bootstrap.min.css" />
</head>

<body ng-controller="demoController">
  <table class="table table-hover">
    <thead>
      <tr>
        <td>Name</td>
        <td>Removed?</td>
      </tr>
    </thead>
    <tbody>
      <tr ng-repeat="item in items track by $index">
        <td ng-bind="item.name"></td>
        <td ng-bind="item.removed"></td>
        <td>
          <button type="button" class="btn btn-danger btn-sm" ng-click="remove($index)">Remove item</button>
        </td>
      </tr>
    </tbody>
  </table>
  <hr>
  <input type="text" class="form-control" ng-model="input" placeholder="Type to add">
  <button type="button" class="form-control btn btn-primary btn-sm" ng-click="add()">Add item</button>
</body>

</html>

注意：如果您不想显示已移除的项目，只需检查tr：

<tr ng-repeat="item in items track by $index" ng-if="!item.removed">

Answer 2

现在，如果你想发送添加和删除，你必须将删除的那些存储在对象本身的某个地方，并带有@ developer033建议的标记或者在另一个对象中。

对我来说，最好将所有添加的和删除的元素存储在一个对象中。现在，您无需单击按钮并在每次添加或删除时发送更改。完成添加和删除后，您只需将带有AJAX请求的整个对象发送到您可以执行逻辑的服务器：

function demoController($scope, $http, $q) {
  $scope.submitItems = function(){
    sendItems($scope.items).then(function () {
      alert("Successfully deleted PT");
    }, function (error) {
      alert(error);
    });
  };
  // ....
  var sendItems = function (items) {
    var request = $http({
      url: _SERVER + 'edit/sendItems', // for example
      method: 'POST',
      data : items
      params: {

      }
    });
    return request.then(function (data) {
      return $q.when(data);
    }, function (error) {
      return $q.reject(error);
    });
  }
  // ....
}

从您调用服务器的位置以及此方法sendItems所在的位置提供服务是一种很好的做法。但我们尽量保持简单。

现在在Spring的休息控制器中，你必须指定@RequestBody param：

@RequestMapping(value = "/sendItems", method = RequestMethod.POST)
public String editProductParameters(@RequestBody ArrayList<Item> items) {
   //your logic goes here
   return "Success"
}

Item.class应该包含以下字段：String name和boolean remove也应该有一个deffault构造函数（如果类中没有构造函数的实现，或者如果有，则指定deffault constructur是一个没有参数的构造函数）也创建关于这两个字段的getter和setter。 Thouse是将整个对象数组（$ scope.items）从客户端传递到具有默认映射的服务器所需的要求。

祝你好运

保存添加和删除的用户

2 个答案: