javascript - 我的 REST 中的 @ModelAttribute 为空

Question

我正在尝试通过 <select multiple> 传递数据来自HTML给我的RESTful 。该数据是 String 的数组。我不知道为什么当我的后端是空的。

这是我的REST :

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

这是我的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>

我尝试修复这个问题好几天了，我用谷歌搜索了很多，但没有找到解决方案。 请帮助我。

我无法更改我的HTML进入JSP由于我的项目结构和业务逻辑。

为什么它是空的？如果我尝试显示一些日志，我会看到一个空数组 [] .

更新

我的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>

我的event-dialog-controller.js : (是与表单一起使用的.js Controller )

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

我的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);
                }
            }
        });
    }
})();

我的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

如果您使用的是 AngularJS，则无法使用 @ModelAttribute 进行数据绑定(bind)，因为 @ModelAttribute 仅存在于 JSP 等模板引擎中，而 AngularJS 不是 Spring 中的模板引擎。尝试在 String 参数上使用 @RequestBody，然后使用 Jackson 提取数据。

还有一个问题，你到底如何从前到后传递你的值(value)观？我没有看到任何 $http angularJS 调用，也没有看到带有 POST 方法的 HTML 表单。