추가 및 제거 된 사용자 저장

안녕하세요 저는 클라이언트 측에서 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를 사용하여 아약스를 사용하여 백엔드로 보냅니다. –

배열을 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이나 다른 객체 중 하나와 같은 플래그로 객체 자체에 저장해야합니다.

는 나에게는 모든 는 하나의 객체에 및 제거 요소를 추가 저장하는 것이 좋습니다. 이제 단추를 클릭하여 추가 또는 제거 할 때마다 변경 사항을 전송할 필요가 없습니다. 당신이 전화 곳에서 서비스를하는 것이 좋습니다

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

: 당신은 추가하고 당신은 단지 당신이 당신의 논리를 할 수있는 서버로 AJAX 요청에 전체 개체를 보낼 수 있습니다 제거하여 수행하는 경우 서버 및이 방법은 sendItems이어야합니다. 그러나 우리는 가능한 한 간단하게 노력합니다. Item.class가 필드로 구성되어야 어디

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

: String name 및 boolean remove도 deffault 생성자가 있어야를 deffault constructur가있는 경우 지정 (

지금 봄에 나머지 컨트롤러에 당신은 @RequestBody PARAM을 지정해야 클래스의 constructur의 구현이 없거나 인수가없는 생성자가있는 경우) 두 필드에 대한 getters 및 setter도 만듭니다. Threat는 클라이언트에서 서버로의 기본 매핑을 사용하여 객체의 전체 배열 ($ scope.items)을 전달하는 데 필요한 요구 사항입니다.

행운을 빌어 요.

출처

2016-08-05 08:49:41

감사합니다. 나는 당신이 권고 한 것을했으며 그것은 아주 잘 작동합니다. – Elmohmoh

추가 및 제거 된 사용자 저장

답변

관련 문제