How can I get on my servlet the ID value instead the displayValue using md-autocomplete?

Question

I have been learning angularjs for two weeks. I'm stuck technically in a simple problem, but I couldn't find an answer. I'm trying to use md-autocomplete in my project and I'm stuck because I want to get the id value instead of the display value in my servlet.

There is my 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;

    }
}})();

List of my autocomplete

[{"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;
}

Does anybody have any idea?

Answer 1

You already have the selected item in the scope of your controller (selectedItem). So all you have to do, is when you submit the form, you can get the id by

selectedItem.id

So perhaps, you have a button at the end of the form

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

Then in your controller

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

The documentation for md-autoselect is: https://material.angularjs.org/latest/api/directive/mdAutocomplete The documentation for ng-click is: https://docs.angularjs.org/api/ng/directive/ngClick