Speichern hinzugefügt und entfernt Benutzer

Hallo Ich benutze angularJs in meiner Client-Seite. Ich habe eine Ansicht, in der ein Benutzer hinzufügen und entfernen Artikel wie folgt aus:Speichern hinzugefügt und entfernt Benutzer

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

Wenn der Benutzer beenden, ich möchte er auf eine Schaltfläche klickt. Und danach werde ich alle hinzugefügten und entfernten Elemente an einen Server senden, um die Datenbank zu aktualisieren. Ich kann das nicht bei jedem Klick tun, weil ich alle Informationen benötige, um eine E-Mail in meinem Server-Teil zu füllen. Ich weiß, wie man Elemente entfernt und hinzufügt, aber ich finde nicht heraus, wie man entfernte Objekte findet und Objekte hinzufügt und sie an den Server sendet. Bitte jemand weiß wie ich das machen kann? Vielen Dank.

Quelle

2016-08-04 Elmohmoh

So möchten Sie dem Benutzer senden, was sie hinzugefügt und entfernt haben ?? –

Ja, @AdamHarrison Ich mache das. – Elmohmoh

Warum pushen Sie nicht, was sie in einem Array entfernt haben und was sie zu einem Array hinzugefügt haben, verwenden Sie dann $ http, um Ajax zu verwenden, um sie an das Backend zu senden? –

Sie können es mit nur 1 Array verwenden. Sie müssen nur eine neue Eigenschaft erstellen und sie auf True setzen - , wenn sie entfernt wird -, oder andernfalls falsch.

Dann in Ihrem Back-End- Sie können diese Eigenschaft Zugriff auf alle entfernten Elemente erhalten.

Siehe Beispiel unter:

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

Hinweis: Wenn Sie nicht die entfernten Objekte anzeigen möchten, können Sie einfach in Ihrem tr überprüfen:

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

Quelle

2016-08-04 22:47:32 developer033

Danke. Das ist eine gute Antwort! – Elmohmoh

Jetzt Wenn Sie sowohl als auch und entfernt senden möchten, müssen Sie die entfernten entweder irgendwo im Objekt selbst mit einem Flag wie @developer033 oder in einem anderen Objekt speichern.

Für mich ist es besser, speichern alle hinzugefügt und entfernt Elemente in einem Objekt. Jetzt müssen Sie nicht auf eine Schaltfläche klicken und die Änderung bei jedem Hinzufügen oder Entfernen senden. Wenn Sie fertig sind mit dem Hinzufügen und Entfernen können Sie einfach nur mit AJAX-Request an den Server das gesamte Objekt senden, wo Sie Ihre Logik tun:

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

Es ist eine gute Praxis von einen Dienst zu haben, wo Sie den Anruf Server und wo sollte diese Methode sendItems sein. Aber wir versuchen, so einfach wie möglich zu bleiben.

Jetzt in Ihrem Ruhe Controller im Frühjahr haben Sie @RequestBody param angeben:

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

Wo die Item.class die Felder bestehen sollte: String name und boolean remove sollten auch einen deffault Konstruktor (deffault Constructur angegeben, wenn es keine Implementierungen von Konstrukturen in der Klasse oder wenn es einen Konstruktor ohne Argumente gibt), erzeugen auch Getter und Setter über die zwei Felder. Dies sind die Anforderungen, die erforderlich sind, um das gesamte Array von Objekten ($ scope.items) vom Client an den Server mit Standardzuordnung zu übergeben.

Viel Glück

Quelle

2016-08-05 08:49:41

Danke. Ich habe getan, was Sie empfohlen haben, und es funktioniert sehr gut. – Elmohmoh

Speichern hinzugefügt und entfernt Benutzer

Antwort

Verwandte Themen