2016-07-02 9 views
0

ngTagsInputディレクティブを使用してAngularJSで簡単なタグ入力フィールドを作成しようとしています。私はtags.jsonにいくつかのタグ名を持っています。これは、入力フィールドにタグ名を入力する際に​​提案として表示したいものです。タグ入力の中に自動補完指示を使用しようとしています。<tags-input>内のAngularJS <オートコンプリート>ディレクティブはクロムブラウザでは機能しません

[ 
    { "text": "Tag1" }, 
    { "text": "Tag2" }, 
    { "text": "Tag3" }, 
    { "text": "Tag4" }, 
    { "text": "Tag5" }, 
    { "text": "Tag6" }, 
    { "text": "Tag7" }, 
    { "text": "Tag8" }, 
    { "text": "Tag9" }, 
    { "text": "Tag10" } 
] 

コードはFirefoxで正常に動作し、あなたが入力した後、ドロップダウン的に提案を表示する 'tags.jsonここ

<!DOCTYPE html> 
<html ng-app="plunker"> 

    <head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="http://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" /> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.2/angular.min.js"></script> 
    <script src="http://mbenford.github.io/ngTagsInput/js/ng-tags-input.min.js"></script> 
    <script> 
     var app = angular.module('plunker', ['ngTagsInput']); 

     app.controller('MainCtrl', function($scope, $http) { 
     $scope.tags = [ 
      { text: 'Tag1' }, 
      { text: 'Tag2' }, 
      { text: 'Tag3' } 
     ]; 

     $scope.loadTags = function(query) { 
      return $http.get('tags.json'); 
     }; 
     }); 
    </script> 
    </head> 

    <body ng-controller="MainCtrl"> 
    <tags-input ng-model="tags" add-on-paste="true"> 
     <auto-complete source="loadTags($query)"></auto-complete> 
    </tags-input> 
    <p>Model: {{tags}}</p> 
    </body> 

</html> 

されています。ここでは

はindex.htmlにあります入力フィールドに「タグ」と入力します。しかし、クロムでは提案は表示されませんが、残りの部分は正常に動作します。ここで

は、Chromeのアプリのスクリーンショットです: enter image description here

クロームでこれを達成するためにどのように任意のアイデア?

+0

上記の問題でデモを見せることはできますか? –

+0

印刷画面のボタンをクリックすると、firefoxのchrome – utkarsh2k2

+0

のアプリのスクリーンショットが追加されました。ドロップダウンが消えて、chromeと同じように見えます。 – utkarsh2k2

答えて

0

ちょっと掘り下げた後、クロムにはファイルがローカルマシンからロードされないようにするセキュリティ上の問題があることがわかりました。この場合はtags.jsonです。 解決方法:一部のサーバーまたはWAMPでファイルをホストすることができます。正常に動作するはずです。

関連する問題