NG-tagsInput不工作

JSNG-tagsInput不工作

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

    $scope.loadTags = function(query) { 
    return $http.get('http://localhost/search.php?term='+query); 
    }; 
});

HTML：

<head> 
    <meta charset="utf-8" /> 
    <title>AngularJS Plunker</title> 
    <script>document.write('<base href="' + document.location + '" />');</script> 
    <link rel="stylesheet" href="style.css" /> 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
    <link rel="stylesheet" href="https://mbenford.github.io/ngTagsInput/css/ng-tags-input.min.css" /> 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
    <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 src="ng-tags-input.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
    <script src="app.js"></script> 
    </head> 

    <body ng-controller="MainCtrl"> 

     <div class="container-fluid"> 
      <div> 
       <tags-input ng-model="tags" > 
      <auto-complete source="loadTags($query)"></auto-complete> 
      </tags-input> 
      </div> 

     </div> 



    <p>Model: {{tags}}</p> 

    </body> 

</html>

這是一個示例HTML代碼可以顯示基於標籤濾波器巴。但我想整合已經實施的另一個應用程序。該應用程序有自己的應用程序，控制器定義。問題是，即使在模板中進行更改後，我也看不到任何更改（主應用程序使用鬍子模板）。這些是我所做的改變。

看JS第一節剛發佈了[ 'ngTagsInput']到應用程序定義

var app = angular.module('staticSelect', ['ui.bootstrap','ngTagsInput']); 
app.controller('ExampleController', ['$scope', '$http', '$rootScope','$timeout', function($scope, $http, $rootScope, $timeout) { 
       $scope.tags = [];

我的HTML的變化：

<div class="container-fluid" > 
         <p>some junk</p> 
         <tags-input ng-model="tags" > 
           <!--<auto-complete source="loadTags($query)"></auto-complete> --> 
         </tags-input> 
       </div>

從我的理解

應該ATLEAST顯示標籤框，但它沒有顯示。

我的問題：

1. Am i missing something ? 
    2. What are the things one should check when doing these kinda work (i am a newbie to UX)

來源

2017-09-06 Abu Tahir

開發控制檯中是否有任何錯誤？ –

不，我沒有看到在控制檯中的任何錯誤 –

@AbuTahir plese發佈json你從''http：//localhost/search.php？term ='+ query'得到 –

對於NG標籤輸入你需要得到服務器數據

{ text: 'Tag1' }, 
{ text: 'Tag2' }, 
{ text: 'Tag3' }

來源

2017-09-06 08:02:45

這裏自動完成不是問題 –

確保您需要提供display-property="name"或任何你想展示或HTML模板

HTML

<tags-input ng-model="tags" display-property="name" placeholder="Add a tag" replace-spaces-with-dashes="false" > 
<auto-complete source="loadTags($query)" 
     min-length="0" 
     load-on-focus="true" 
     load-on-empty="true"></auto-complete> 
</tags-input>

我不知道所有的設置，但是這個例子應該爲你工作。請啓動它，並比較您的設置：

Demo in Plunker

[編輯]

如果它不是HTML的問題，而是：

$scope.loadTags = function(query) { 
    return $http.get('http://localhost/search.php?term='+query); 
};

變化：

$scope.loadTags = function($query) { 
    return $http.get('http://localhost/search.php?term='+query).then(function(response) { 
     return response.data; 
    }); 
    };

來源

2017-09-06 08:02:55

現在跳過自動完成部分。 JavaScript文件似乎對我來說是個問題。正如你在前兩個JS上面看到的那樣，HTML部分工作正常。當集成到其他角度應用程序時，它不能正常工作 –

結構本身沒有顯示 –

@AbuTahir更新回答 –

NG-tagsInput不工作

回答

相關問題