ng标记输入无法从自动完成中选择选项

ng-tags-input not able to choose an option from autocomplete

本文关键字：选项 选择 输入 ng      更新时间：2023-09-26

我在这个指令中遇到了一些问题；第一个问题是我看不到列表中的任何项目。。有时它会说ngRepeat有重复的值，然后即使我能看到一些东西，我也不能选择它并将其输入！怎么可能？这是一个plunker

http://plnkr.co/edit/vTwOqcN4pm3FgKLYlLu9?p=preview

顺便说一下，这是html代码部分：

<body ng-controller="MainCtrl">
    <tags-input ng-model="tags"add-from-autocomplete-only="true">
      <auto-complete min-length="1"
                    source="loadTags($query)"
                    template="my-custom-template"></auto-complete>
    </tags-input>
    <p>Model: {{tags}}</p>
     <script type="text/ng-template" id="my-custom-template">
        <div class="right-panel>
            <span ng-bind-html="$highlight($getDisplayText())"></span>
            <h1 style="font-size: 15px!important" class="uk-margin-remove">
                {{data.name}}
            </h1>
        </div>
    </script>
  </body>

这里是角度：

var app = angular.module('plunker', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
  $scope.tags = [];

  $scope.loadTags = function(query) {
            return $http.get('tags.json', {
                cache: true
            }).then(function(data) {
                $scope.names = data.data.data;
                return $scope.names;
            });
        };
});

我已经解决了您的问题，并以一种简单的方式找到了解决方案。我已经测试过了，它有效。我希望这就是你想要的。

角度脚本文件

var app = angular.module('plunker', ['ngTagsInput']);
app.controller('MainCtrl', function($scope, $http) {
  $scope.tags = [];
  $scope.names = [];

  $scope.loadTags = function() {
            return $http.get('tags.json').then(function(response) {
              var data = response.data.data.data;
              $scope.names = [];
              for (var tag in data)
              {
                $scope.names.push(data[tag].name);
              }
                return $scope.names;
            });
        };
});

HTML文件

<tags-input ng-model="tags" add-from-autocomplete-only="true">
<auto-complete min-length="1"
        source="loadTags()"
        template="my-custom-template"></auto-complete>
</tags-input>
<p>Model: {{tags}}</p>

您的代码看起来不错。我看到的唯一问题是，在tags.json中，data.data对象的形式应该是{id:idVal，text:nameVal}。也就是说，显示字段名称应该是"text"而不是"name"。

使用此plunker

http://plnkr.co/edit/QFjUPSUENc8RiqipRT28?p=preview

使用key-property = "id" and display-property="name删除复制错误，并显示列表

相关文章：