(我是 AngularJS/JS 菜鸟)
我正在尝试使用 html 输入数据列表创建一个自动完成下拉列表。该列表应包含 json 对象,我只想向用户显示其中的一个属性。
数据列表是表单的一部分。提交时,我想“知道”/将所选对象作为 json 发送。
这是我到目前为止所拥有的(实际上我有 2 个下拉菜单,我想发送一个嵌套 2 个选定对象的对象):
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;
});
}
});
这有两个问题:
{
"user":"{\"id\":6,\"self\":null,\"name\":\"manager\",\"role\":\"MANAGER\"}",
"project":"{\"id\":8,\"self\":null,\"name\":\"p2\",\"description\":\"2nd\"}"
但它应该是这样的:
{
"user" : {"id":6,"self":null,"name":"manager","role":"MANAGER"},
"project" : {"id":3,"self":null,"name":"project1","description":"important"}
}
那么如何解决这个问题呢?
Plunker(根据要求 - 我绝对是 js 菜鸟,所以提前抱歉)
代码略有改动,问题依旧。
最佳答案
问题是您正在尝试使用 <datalist>
之类的 <select>
。在 <datalist>
中,只使用 <option value="...">
部分,而不使用其余部分。因此 value
必须包含 <input>
字段中显示的文本。
将您的 HTML 更改为:
<datalist id="users">
<option ng-repeat="user in usersList" value="{{user}}">
</datalist>
和
<datalist id=projects>
<option ng-repeat="project in projectsList" value="{{project}}">
</datalist>
然后
value
需要在 usersList
或 projectsList
数组中定位条目,因此您需要创建一个新变量,如下所示:$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]
});
最后,将您的
submit
函数更改为:$scope.submit = function(){
var data = {
"user" : $scope.usersList[$scope.fields.user],
"project" : $scope.projectsList[$scope.fields.project]
};
...
关于angularjs - 使用 angularjs (1.3) 处理数据列表,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/30645378/