angularjs - 使用 angularjs (1.3) 处理数据列表

Question

(我是 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;
        });
    }
});

这有两个问题:

• 下拉列表将数据显示为 json(值)- 我只需要某些字段

• 我创建的对象无效。看起来:

  {

  "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 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]
                };
...