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>

我试图解决这个问题几天，我用Google搜索了这么多，但我没有找到解决办法。请帮助我。

由于我的项目结构和业务逻辑，我无法将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控制器）

(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将数据绑定到数据，因为@ModelAttribute仅存在于JSP等模板引擎中，而AngularJS不是Spring中的模板引擎。请尝试在String参数上使用@RequestBody，然后使用Jackson提取数据。

还有一个问题，您如何从前到后传递您的价值？我没有看到任何$http angularJS调用，也没有使用POST方法的HTML表单。

我的REST中的@ModelAttribute是空的

1 个答案: