2016-08-04 49 views
3

。我有一個觀點,其中用戶可以像這樣添加和刪除項目:保存添加和Hi我使用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` 
}); 

當用戶結束了,我想他點擊一個按鈕。之後我會將所有添加和刪除的項目發送到服務器以更新數據庫。我無法每次點擊都做到這一點,因爲我需要所有信息來填充服務器部分中的電子郵件。我知道如何刪除和添加項目,但我不知道如何找到刪除的項目並添加項目並將它們發送到服務器。請任何人知道我該如何做到這一點? 非常感謝。

+0

所以你想發送用戶,他們添加和刪除了什麼? –

+0

是的,@亞當哈里森我非常想做到這一點。 – Elmohmoh

+0

爲什麼不將他們已經移除的數據推送到數組,以及他們已經添加到數組中,然後使用$ http使用ajax將它們發送到後端? –

回答

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"> 
+0

謝謝。這是一個很好的答案! – Elmohmoh

1

現在如果你想同時發送添加刪除你有實際存儲刪除那些在對象的地方要麼本身與像@ 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應該在哪裏。但我們儘量保持簡單。

現在在春天你休息控制器,你必須指定@RequestBody PARAM:

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

Item.class應包括以下字段:String nameboolean remove也應該有一個deffault構造函數(如果有deffault constructur指定在類中沒有構造函數的實現,或者如果沒有參數的構造函數)也會創建關於這兩個字段的getter和setter。 Thouse是使用默認映射將整個對象數組($ scope.items)從客戶端傳遞到服務器所需的要求。

祝你好運

+0

謝謝。我做了你的建議,並且工作得很好。 – Elmohmoh

相關問題