CODEWITHSUNDEEP
javascriptangularjsspring-boot
Elmohmoh
Elmohmoh

Reputation: 73

Save added and removed user

Hi I'm using angularJs in my client side. I have a view where a user can add and remove item like this:

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`
});

When the user finish, I want he clicks on a button. And after I will send all the items added and removed to a server to update database. I can't do this on each click because I need all the information to fill an email in my server part. I know how to remove and add item but I don't how to found removed items and add items and send them to the server. Please any one know how I can do this? Thanks a lot.

Upvotes: 3

Views: 68

Answers (2)

Lazar Lazarov
Lazar Lazarov

Reputation: 2532

Now if you want to send both added and removed you have to actually store the removed ones somewhere either in the object itself with a flag like @developer033 suggested or either in an other object.

For me it is better to store all added and removed elements in one object. Now you do not need to click a button and send the change on every add or remove. When you are done with adding and removing you can just simply send the whole object with AJAX request to the server where you can do your logic: 

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);
    });
  }
  // ....
}

It is a good practise to have a service from where you call the server and where this method sendItems should be. But we try to keep at as simple as possible.

Now in your rest controller in Spring you have to specify @RequestBody param:

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

Where the Item.class should consist the fields: String name and boolean remove also should have a deffault constructor(deffault constructur is specified if there are none implementations of constructurs in the class or if there is a constructor with no arguments) also create getters and setter about the two fields. Thouse are the requirements that are needed to pass the whole array of objects($scope.items) from the client to the server with default mapping.

Good luck

Upvotes: 1

developer033
developer033

Reputation: 24894

You can do it with only using 1 array. You just have to create a new property and set it to true - if removed -, or false otherwise.

Then in your back-end you can get all the removed items accessing this property.

See the example below:

(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>

Note: If you don't want to show the removed items, you can simply check in your tr:

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

Upvotes: 1

Related Questions