ng-tagsInput 不工作

Question

JS

 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 代码，可以显示基于标签的过滤栏。但我想与已经实施的另一个应用程序集成。该应用程序有自己的应用程序，控制器定义。问题是即使在模板中进行更改后我也看不到任何更改（主应用程序使用 mustache 模板）。这些是我所做的更改。

查看我刚刚添加 ['ngTagsInput'] 到应用定义

的 JS 部分

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>

根据我的理解，它至少应该显示标签框，但它没有显示。

我的问题：

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

Answer 1

对于 ng-tags-input，您需要获取服务器数据

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

有关更多信息，请参阅 http://mbenford.github.io/ngTagsInput/demos

Answer 2

请确保您需要提供 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;
    });
  };

ng-tagsInput 不工作

ng-tagsInput is not working

html

javascript

angularjs

ng-tags-input