ng-tags-input無法從自動完成中選擇一個選項

我在這個指令中有一些問題;第一個是我看不到列表中的任何項目。然後有時它說ngRepeat有重複的值，然後即使我能夠看到我不能選擇它並將其放在輸入上！怎麼可能？這裏有一個plunkerng-tags-input無法從自動完成中選擇一個選項

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

});

來源

2015-07-02 End.Game

您的代碼看起來不錯。我看到的唯一問題是，在tags.json中，data.data對象應該採用{id：idVal，text：nameVal}的形式。也就是說，顯示字段名稱應該是'文本'而不是'名稱'。

來源

2015-07-02 16:03:39 GPicazo

所以這個指令只適用於json中的「text」字段？ –

您可以通過在標記輸入指令中將display-property屬性設置爲display-property =「name」來覆蓋該屬性。 – GPicazo

雖然你在這裏，你也應該設置key-property =「id」，因爲它也默認爲文本。 keyProperty是控件用於明確識別不同項目的內容。 – GPicazo

我已經解決了您的問題並以簡單的方式找到了解決方案。我已經測試過它，它工作。我希望那是你正在尋找的。

角腳本文件

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>

來源

2015-07-02 16:09:53 hsynlms

謝謝你，明天我會檢查你的解決方案。我希望它的工作。順便說一下，我會明天讓你知道。謝謝！ –

此解決方案不必要的複雜，因爲它會強制您編寫轉換原始數據的代碼。標籤輸入控件非常靈活，可以讓您覆蓋屬性名稱，因此您不必編寫額外的邏輯。 – GPicazo

使用本plunker

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

使用key-property = "id" and display-property="name去除duplicacy錯誤，並顯示列表

來源

2016-08-10 07:54:45

ng-tags-input無法從自動完成中選擇一個選項

回答

相關問題