ng-tags-input 无法从自动完成中选择一个选项答案

【问题标题】：ng-tags-input not able to choose an option from autocompleteng-tags-input 无法从自动完成中选择一个选项
【发布时间】：2015-07-02 15:34:23
【问题描述】：

我在这个指令中有一些问题；第一个是我在列表中看不到任何项目。然后有时它会说 ngRepeat 具有重复值，然后即使我能够看到某些内容我也无法选择它并将其放在输入中！怎么可能？这是一个小家伙

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

});

【问题讨论】：

标签： javascript angularjs ng-tags-input

【解决方案1】：

我已经解决了您的问题，并以简单的方式找到了解决方案。我已经对其进行了测试，并且可以正常工作。我希望这就是您正在寻找的。p>

Angular 脚本文件

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>

【讨论】：

谢谢，明天我会检查您的解决方案。我希望它有效。顺便说一句，我明天会告诉你。谢谢！
此解决方案过于复杂，因为它迫使您编写转换原始数据的代码。标签输入控件足够灵活，允许您覆盖属性名称，这样您就不必编写这些额外的逻辑。

【解决方案2】：

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

【讨论】：

所以这个指令只适用于 json 中的“文本”字段？
您可以通过在标签输入指令上将 display-property 属性设置为 display-property="name" 来覆盖它。
当您使用它时，您可能还应该设置 key-property="id" 因为它也默认为文本。 keyProperty 是控件用来区分不同项目的。
嗯，我明天试试。请继续关注，明天我会在这里写下回复吗？
我可能不能，因为明天是假期。但是，您可以通过简单地将以下内容添加到 plunker 中标记输入指令的末尾来快速测试它： display-property="name" key-property="id"

【解决方案3】：

使用这个插件

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

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

【讨论】：