@ModelAttribute in meinem REST kommt leer

Question

Ich versuche, Daten über <select multiple> von HTML zu meinem RESTful zu übergeben. Diese Daten sind ein Array von String. Ich weiß nicht warum wenn es um mein Backend geht, ist es leer.

Das ist mein REST:

@PutMapping("/events") 
@Timed 
public ResponseEntity<Event> updateEvent(@RequestBody Event event, @ModelAttribute("attendeesToParse") ArrayList<String> attendeesToParse) throws URISyntaxException { 
    //Some code 
} 

Das ist mein HTML:

<div class="form-group"> 
     <label>Attendees</label> 
     <select class="form-control" multiple name="attendeesToParse" ng-model="vm.usernames" 
       ng-options="customUser as customUser.username for customUser in vm.customusers"> 
      <option value=""></option> 
     </select> 
</div> 

Ich habe versucht, diese für Tage zu beheben, habe ich es gegoogelt so sehr, aber ich fand keine Lösungen. Bitte mir helfen.

Ich kann meine HTML in eine JSP wegen der Struktur meines Projektes und der Geschäftslogik nicht ändern.

Warum ist es leer? Wenn ich versuche, einige Protokolle anzuzeigen, sehe ich ein leeres Array [].

UPDATE

Mein HTML form call:

<form name="editForm" role="form" novalidate ng-submit="vm.save()"> 
    <!-- some code --> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal" ng-click="vm.clear()"> 
      <span class="glyphicon glyphicon-ban-circle"></span>&nbsp;<span data-translate="entity.action.cancel">Cancel</span> 
     </button> 
     <button type="submit" ng-disabled="editForm.$invalid || vm.isSaving" class="btn btn-primary"> 
      <span class="glyphicon glyphicon-save"></span>&nbsp;<span data-translate="entity.action.save">Save</span> 
     </button> 
    </div> 
</form> 

Mein event-dialog-controller.js: (ist die Js-Controller, der mit Form arbeitet)

(function() { 
    'use strict'; 

    angular 
     .module('businessRequestApp') 
     .controller('EventDialogController', EventDialogController); 

    EventDialogController.$inject = ['$timeout', '$scope', '$stateParams', '$uibModalInstance', '$q', 'entity', 'Event', 'Desk', 'CustomUser']; 

    function EventDialogController ($timeout, $scope, $stateParams, $uibModalInstance, $q, entity, Event, Desk, CustomUser) { 
     var vm = this; 

     vm.event = entity; 
     vm.clear = clear; 
     vm.datePickerOpenStatus = {}; 
     vm.openCalendar = openCalendar; 
     vm.save = save; 
     vm.reftables = Desk.query({filter: 'event-is-null'}); 
     $q.all([vm.event.$promise, vm.reftables.$promise]).then(function() { 
      if (!vm.event.refTable || !vm.event.refTable.id) { 
       return $q.reject(); 
      } 
      return Desk.get({id : vm.event.refTable.id}).$promise; 
     }).then(function(refTable) { 
      vm.reftables.push(refTable); 
     }); 
     vm.customusers = CustomUser.query(); 

     $timeout(function(){ 
      angular.element('.form-group:eq(1)>input').focus(); 
     }); 

     function clear() { 
      $uibModalInstance.dismiss('cancel'); 
     } 

     function save() { 
      vm.isSaving = true; 
      if (vm.event.id !== null) { 
       Event.update(vm.event, onSaveSuccess, onSaveError); 
      } else { 
       Event.save(vm.event, onSaveSuccess, onSaveError); 
      } 
     } 

     function onSaveSuccess (result) { 
      $scope.$emit('businessRequestApp:eventUpdate', result); 
      $uibModalInstance.close(result); 
      vm.isSaving = false; 
     } 

     function onSaveError() { 
      vm.isSaving = false; 
     } 

     vm.datePickerOpenStatus.date = false; 

     function openCalendar (date) { 
      vm.datePickerOpenStatus[date] = true; 
     } 
    } 
})(); 

Mein event-service.js:

(function() { 
    'use strict'; 
    angular 
     .module('businessRequestApp') 
     .factory('Event', Event); 

    Event.$inject = ['$resource', 'DateUtils']; 

    function Event ($resource, DateUtils) { 
     var resourceUrl = 'api/events/:id'; 

     return $resource(resourceUrl, {}, { 
      'query': { method: 'GET', isArray: true}, 
      'get': { 
       method: 'GET', 
       transformResponse: function (data) { 
        if (data) { 
         data = angular.fromJson(data); 
         data.date = DateUtils.convertLocalDateFromServer(data.date); 
        } 
        return data; 
       } 
      }, 
      'update': { 
       method: 'PUT', 
       transformRequest: function (data) { 
        var copy = angular.copy(data); 
        copy.date = DateUtils.convertLocalDateToServer(copy.date); 
        return angular.toJson(copy); 
       } 
      }, 
      'save': { 
       method: 'POST', 
       transformRequest: function (data) { 
        var copy = angular.copy(data); 
        copy.date = DateUtils.convertLocalDateToServer(copy.date); 
        return angular.toJson(copy); 
       } 
      } 
     }); 
    } 
})(); 

Mein event.controller.js:

(function() { 
    'use strict'; 

    angular 
      .module('businessRequestApp') 
      .controller('EventController', EventController); 

    EventController.$inject = ['Event', 'CustomUser', '$scope']; 

    function EventController(Event, CustomUser, $scope) { 

     var vm = this; 

     vm.events = []; 
     vm.customUsers = []; 
     vm.usernames = ["test1", "test2", "test3"]; 

     $scope.allCustomUsers = []; 

     loadAll(); 


     function loadAll() { 
      Event.query(function (result) { 
       vm.events = result; 
       vm.searchQuery = null; 
      }); 
      CustomUser.query(function (result) { 
       vm.customUsers = result; 
       vm.searchQuery = null; 
       for (var i = 0; i < vm.customUsers.length; i++) { 
        $scope.allCustomUsers.push(vm.customUsers[i].username); 
       } 
      }); 
     } 

    } 
})(); 

Answer 1

Wenn Sie AngularJS verwenden, können Sie keine Daten binden Daten mit @ModelAttribute, weil @ModelAttribute nur mit Template-Engines wie JSP vorhanden ist, und AngularJS ist keine Vorlage Motor im Frühling. Versuchen Sie stattdessen, @RequestBody für den Parameter String zu verwenden, und extrahieren Sie dann die Daten mit Jackson.

Ein weiteres Problem, wie genau übergeben Sie Ihre Werte von vorne nach hinten? Ich sehe keinen $http AngularJS-Aufruf und kein HTML-Formular mit POST-Methode.