Question

（我是AngularJS / JS noob）我正在尝试使用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>

角：

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;
        });
    }
});

这有两个问题：

下拉列表将数据显示为json（值） - 我只想要某些字段
我创建的对象无效。它看起来：

{

“用户”： “{\” ID \ “：6，\” 自\ “：空，\” 名称\ “：\” 经理\ “\ ”角色\“：\ ”MANAGER \“}” ，

“项目”： “{\” ID \ “：8，\” 自\ “：空，\” 名称\ “：\” P2 \ “\ ”描述\“：\ ”第二\“}”

}

但它应该是这样的：

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

那么如何解决这个问题？

Plunker（根据要求 - 我绝对是js noob，所以提前抱歉）代码略有变化，问题仍然存在。

Answer 1

问题是您尝试使用<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处理datalist（1.3）

1 个答案: