在 Angularjs 中使用 AutoComplete ng 标签输入答案

【问题标题】：Using AutoComple ngTagsInput in Angular JS在 Angularjs 中使用 AutoComplete ng 标签输入
【发布时间】：2017-03-11 04:27:17
【问题描述】：

在我的项目中，我使用 ngTagsInput 进行标记。我有一个问题，我做了loadTags。我从 API 获得，并尝试更改 {text : sometag} 之类的结构。然后我的自动完成标签不起作用。即使我在http://mbenford.github.io/ngTagsInput/demos 中使用return 之类的教程。

LoadTags 从 API 获取数据

$scope.loadTags = function(query) {
    var url = "http://192.168.0.253:81/agnes/ruang-vemale/api/v1/category/get/3c8dd5e26e7e653c9823728f90fcbadf39c2651e/";
    data = {
        username: "newshubid",
        data: {
            orderby: {
                field: "label",
                type: "DESC"
            }
        }
    };
    args = {
        "data": JSON.stringify(data)
    };
    param = $.param(args);
    HttpService("POST", url, param, function(response) {
        res = angular.fromJson(response.data);
        angular.forEach(res, function(item) {
            $scope.get_cat = {
                text: item.label
            };
            return $scope.get_cat;
        });
    });
};

HTML

<tags-input ng-model="tag" class="bootstrap"
                                        replace-spaces-with-dashes="false"
                                        on-tag-added="AttachTag($tag)"
                                        on-tag-removed="RemovedTag($tag)">
        <auto-complete source="loadTags($query)"></auto-complete>
</tags-input>

请帮助我并在我发现错误的地方给我解决方案。谢谢。

【问题讨论】：

您介意在 plnkr/jsbin/jsfiddle 中使用示例 json 创建工作副本吗...？

标签： javascript angularjs arrays angularjs-http ng-tags-input

【解决方案1】：

您对tag data 使用了错误的ng-model 绑定

尝试，将$scope.get_cat 作为一个数组，并将每个标签推入其中。

$scope.loadTags = function(query) {
    var url = "http://192.168.0.253:81/agnes/ruang-vemale/api/v1/category/get/3c8dd5e26e7e653c9823728f90fcbadf39c2651e/";
    data = {
        username: "newshubid",
        data: {
            orderby: {
                field: "label",
                type: "DESC"
            }
        }
    };
    args = {
        "data": JSON.stringify(data)
    };
    param = $.param(args);
    HttpService("POST", url, param, function(response) {
        res = angular.fromJson(response.data);
        $scope.get_cat = []
        angular.forEach(res, function(item) {
            $scope.get_cat.push({
                text: item.label
            });

        });
        return $scope.get_cat;
    });
};

【讨论】：

我尝试了您的代码，但在 console.log 中显示错误，例如 TypeError: Cannot read property 'data' of undefined
尝试在第三行添加var data
我认为问题不在于第三行中的 var 数据。还是不行
问题出在http response
试试console.log(response) 看看会发生什么

【解决方案2】：

如果你已经正确阅读了 ngTagsInput 的文档。上面写着它期望得到一个承诺作为回报。我在你的代码中为你做了一点改变。 $q 服务负责 Angular 中的承诺。现在为此，您需要在控制器中注入 $q。希望它有效。

$scope.loadTags = function(query) {
        var url = "http://192.168.0.253:81/agnes/ruang-vemale/api/v1/category/get/3c8dd5e26e7e653c9823728f90fcbadf39c2651e/";
        data = {
            username: "newshubid",
            data: {
                orderby: {
                    field: "label",
                    type: "DESC"
                }
            }
        };
        args = {
            "data": JSON.stringify(data)
        };
        param = $.param(args);
        var deferred = $q.defer();
        HttpService("POST", url, param,
        function(response) {
            res = angular.fromJson(response.data);
            $scope.get_cat = []
            angular.forEach(res, function(item) {
                $scope.get_cat.push({
                    text: item.label
                });

            });
              deferred.resolve($scope.get_cat);
              return deferred.promise; 
        });
    };

【讨论】：