Сохранить и удалить пользователя

Привет Я использую 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` 
});

Когда финишная пользователь, я хочу, он нажимает на кнопку. И после того, как я пошлю все элементы, добавленные и удаленные на сервер, чтобы обновить базу данных. Я не могу сделать это при каждом нажатии, потому что мне нужна вся информация для заполнения электронной почты на моей серверной части. Я знаю, как удалить и добавить элемент, но я не могу найти удаленные элементы и добавить элементы и отправить их на сервер. Пожалуйста, кто-нибудь знает, как я могу это сделать? Большое спасибо.

источник

2016-08-04 Elmohmoh

Итак, вы хотите отправить пользователя, что они добавили и удалили? –

Да, @AdamHarrison Я хочу сделать это. – Elmohmoh

Почему бы вам не нажать то, что они удалили на массив, и то, что они добавили в массив, а затем использовать $ http для использования ajax для отправки их на сервер? –

Вы можете сделать это, используя только 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">

источник

2016-08-04 22:47:32 developer033

Спасибо. Это хороший ответ! – Elmohmoh

Теперь, если вы хотите отправить и добавлено и удалено, вы должны фактически сохранить удаленные где-то либо в самом объекте, либо в качестве флага типа @ 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. Но мы стараемся держаться как можно проще.

Теперь в контроллере отдыха весной вы должны указать @RequestBody параметров:

@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 указывается, если есть никакие реализации конструкторов в классе или конструктор без аргументов) также создают геттеры и настройки для двух полей. Thouse - это требования, необходимые для передачи всего массива объектов ($ scope.items) с клиента на сервер с отображением по умолчанию.

Удача

источник

2016-08-05 08:49:41

Спасибо. Я сделал то, что вы посоветовали, и он работает очень хорошо. – Elmohmoh

Сохранить и удалить пользователя

ответ

Смежные вопросы