Handling datalist with angular (1.3)
(I am AngularJS / JS noob) I am trying to create an auto full expansion using an html input list. The list should contain json objects and I want to show the user only one attribute of them. the data list is part of the 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 to send an object nested in 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 are 2 problems here:
- the dropdown shows the data as json (value) - I only want certain fields
-
The object I created is not valid. He looks:
{
"user": "{\" ID \ ": 6, \" self \ ": null, \" name \ ": \" manager \ "\" role \ ": \" MANAGER \ "}",
"project": "{\" ID \ ": 8, \" self \ ": null, \" name \ ": \" p2 \ "\" description \ ": \" second \ "}"
}
but it should look like this:
{
"user" : {"id":6,"self":null,"name":"manager","role":"MANAGER"},
"project" : {"id":3,"self":null,"name":"project1","description":"important"}
}
So how do you fix this?
Plunker (on request - I'm absolutely a js noob so sorry in advance) The code has changed a bit, the problem remains.
source to share
The problem is you are trying to use <datalist>
both a <select>
. The <datalist>
only part <option value="...">
, and not the rest. Therefore, it value
must contain the text displayed in the field <input>
.
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 value
you need to find the entry in the arrays usersList
or projectsList
, 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 function submit
to this:
$scope.submit = function(){
var data = {
"user" : $scope.usersList[$scope.fields.user],
"project" : $scope.projectsList[$scope.fields.project]
};
...
source to share