Handling datalist with angularjs (1.3) -

(i angularjs/js noob) trying create auto complete drop down html input data list. list should hold json objects , want show user 1 attribute of them. data list part of form. on submit want "know"/sent selected object json. here have far (actual have 2 drop downs , want sent object nesting 2 selected objects): html:

        <form ng-controller="registerusertoprojectcontroller" ng-submit="submit()">             <div class="form-group">                 <label for="user">user</label>                 <input type="text" list="users" class="form-control" ng-model="fields.user" />                 <datalist id="users">                     <option ng-repeat="user in userslist" value="{{user}}">{{user.name}} ({{user.role}})</option>                 </datalist>             </div>             <div class="form-group">                 <label for="project">project</label>                 <input type="text" list="projects" class="form-control" ng-model="fields.project" />                 <datalist id=projects>                     <option ng-repeat="project in projectslist" value="{{project}}">{{project.name}}</option>                 </datalist>             </div>             <button type="submit">register!</button>             <input type="text" disabled="disabled" ng-value="result" />         </form> 

angular:

app.controller('registerusertoprojectcontroller', function($scope, $http) {     $scope.projectslist = [];     $http.get(rooturl + '/timetracker/project/all').success(function(response) {         $scope.projectslist = response;     });     $scope.userslist = [];     $http.get(rooturl + '/timetracker/user/all').success(function(response) {         $scope.userslist = response;     });     $scope.submit = function(){         var data = {                     "user" : $scope.fields.user,                     "project" : $scope.fields.project                     };          $scope.result ="?";         $http.post(rooturl + "/timetracker/usersprojects", data).success(                 function(answer, status) {                     $scope.result = status;                 }).error(function(answer, status) {             $scope.result = status;         });     } }); 

there ar 2 problems this:

• the dropdown shows data json (the value) - want fields

• the object created invalid. looks:

  {

  "user":"{\"id\":6,\"self\":null,\"name\":\"manager\",\"role\":\"manager\"}",

  "project":"{\"id\":8,\"self\":null,\"name\":\"p2\",\"description\":\"2nd\"}"

  }

but should way:

{ "user" : {"id":6,"self":null,"name":"manager","role":"manager"}, "project" : {"id":3,"self":null,"name":"project1","description":"important"} } 

so how fix this?

plunker (as requested - absolute js noob sorry in advance) code has change, problem remains.

the problem you're trying use <datalist> <select>. in <datalist>, <option value="..."> part used, not rest. value must contain text shown in <input> field.

change html this:

<datalist id="users">     <option ng-repeat="user in userslist" value="{{user}}"> </datalist> 

and

<datalist id=projects>     <option ng-repeat="project in projectslist" value="{{project}}"> </datalist> 

then value needs locate entry in userslist or projectslist arrays need create new variable this:

$scope.projectslist = {}; $http.get(rooturl + '/timetracker/project/all').success(function(response) {     (var i=0; i<response.length; ++i)         $scope.projectslist[response[i].name] = response[i] }); $scope.userslist = {}; $http.get(rooturl + '/timetracker/user/all').success(function(response) {     (var i=0; i<response.length; ++i)         $scope.userslist[response[i].name + ' ' + response[i].role] = response[i] }); 

finally, change submit function this:

$scope.submit = function(){     var data = {                 "user" : $scope.userslist[$scope.fields.user],                 "project" : $scope.projectslist[$scope.fields.project]                 }; ...