Как я могу получить в моем сервлете значение идентификатора вместо displayValue с помощью md-autocomplete?

Question

Я изучаю angularjs в течение двух недель. Технически я застрял в простой проблеме, но я не мог найти ответ. Я пытаюсь использовать md-autocomplete в своем проекте, и я застрял, потому что я хочу получить значение id вместо значения display в моем сервлете.

Есть мой md-autocomplete:

<div ng-controller="DemoCtrl as ctrl" layout="column" ng-cloak>
<md-content class="md-padding">
    <md-autocomplete flex="true" 
                     required="true"
                     md-input-name="autocompleteField" 
                     md-input-minlength="2" 
                     md-input-maxlength="18" 
                     md-no-cache="ctrl.noCache" 
                     md-selected-item="ctrl.selectedItem" 
                     md-search-text="ctrl.searchText" 
                     md-items="item in ctrl.querySearch(ctrl.searchText)" 
                     md-item-text="item.display"
                     md-require-match="true" 
                     md-floating-label="Favorite state">
        <md-item-template>
            <span md-highlight-text="ctrl.searchText" md-highlight-flags="^i">{{item.display}}</span>
        </md-item-template>
        <div ng-messages="formSave.autocompleteField.$error" ng-if="formSave.autocompleteField.$touched || formSave.$submitted">
            <div ng-message="required">You <b>must</b> have a favorite state.</div>
            <div ng-message="md-require-match">Please select an existing state.</div>
            <div ng-message="minlength">Your entry is not long enough.</div>
            <div ng-message="maxlength">Your entry is too long.</div>
        </div>
    </md-autocomplete>
</md-content>

JS:

(function () {
'use strict';
angular
        .module('autocompleteFloatingLabelDemo', ['ngMaterial', 'ngMessages'])
        .controller('DemoCtrl', DemoCtrl);
function DemoCtrl($http, $timeout, $q) {
    var self = this;
    self.states = null;
    self.selectedItem = null;
    self.searchText = null;
    self.querySearch = querySearch;

    function querySearch(query) {
        var deferred = $q.defer();
        $http.defaults.headers.post["Content-Type"] = "application/x-www-form-urlencoded; charset=utf-8";
        var all;
        $http({
            method: 'GET',
            url: '/employee',
            params: {
                employeeListByName: true,
                active:'active',
                name: query,
                async: false
            }
        }).then(function (response) {
            all = response.data;
            $timeout(function () {
                deferred.resolve(all);
            }, Math.random() * 1000, false);
            deferred.promise;
        }, function () {
            alert('Error');
        });
        return deferred.promise;

    }
}})();

Список моего автозаполнения

[{"id" : "90", "display" : "Emplooy 1"},{"id" : "66", "display" : "Emplooy 2"}, {"id" : "179", "display" : "Emplooy 3"}, {"id" : "48", "display" : "Emplooy 4"}]

Servlet:

@Override
protected void doPost(HttpServletRequest request, HttpServletResponse response){
        String id = request.getParameter("autocompleteField");//the result its the display value, I want to get the id value;
}

У кого-нибудь есть идеи?

Answer 1

У вас уже есть выбранный элемент в области действия вашего контроллера (selectedItem). Так что все, что вам нужно сделать, это когда вы отправляете форму, вы можете получить идентификатор по

selectedItem.id

Так что, возможно, у вас есть кнопка в конце формы

<button ng-click="submit()">Click me</button>

Тогда в вашем контроллере

function submit(){
   var id = selectedItem.id;
   //make http call
}

Документация для md-autoselect: https://material.angularjs.org/latest/api/directive/mdAutocomplete. Документация для ng-click: https://docs.angularjs.org/api/ng/directive/ngClick