(我是 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 菜鸟,所以提前抱歉)
    代码略有改动,问题依旧。

    最佳答案

    问题是您正在尝试使用 <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 需要在 usersListprojectsList 数组中定位条目,因此您需要创建一个新变量,如下所示:
    $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/

    10-12 12:25
    查看更多