Handling datalist with angularjs (1.3)

Question

(i am AngularJS/JS noob) I am trying to create an auto complete drop down with html input data list. The list should hold json objects and i want to show the user only one attribute of them. the data list is part of a form. on submit i want to "know"/sent the selected object as json. here is what i have so far (actual i have 2 drop downs and i want sent an object nesting the 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 with this:

• the dropdown shows data as json (the value) - i want only certain fields

• the object i created is invalid. It looks:

  {

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

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

  }

but it should look this way:

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

So how to fix this?

Plunker (as requested - i am absolute js noob so sorry in advance) The code has slightly change, problem remains.

Answer 1

The problem is that you're trying to use a <datalist> like a <select>. In a <datalist>, only the <option value="..."> part is used, not the rest. So the value must contain the text shown in the <input> field.

Change your HTML to 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 the value needs to locate the entry in your usersList or projectsList arrays so you need to create a new variable like this:

$scope.projectsList = {};
$http.get(rootUrl + '/timetracker/project/all').success(function(response) {
    for (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) {
    for (var i=0; i<response.length; ++i)
        $scope.usersList[response[i].name + ' ' + response[i].role] = response[i]
});

Finally, change your submit function to this:

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