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

查看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>

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

我的问题：

  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，您需要获取服务器数据

"Unit 100_sys" = SYSTEM          
   TYPE             = PTAC
   HEAT-SOURCE      = HEAT-PUMP
   BASEBOARD-SOURCE = NONE
   SIZING-RATIO     = 1.15
   MAX-SUPPLY-T     = 90
   MIN-SUPPLY-T     = 55
   FAN-SCHEDULE     = "S1 Sys1 (PTAC) Fan Sch"
   FAN-CONTROL      = TWO-SPEED
   SUPPLY-STATIC    = 0.5
   SUPPLY-EFF       = 0.33
   COOLING-EIR      = 0.329152
   HEATING-EIR      = 0.34025
   ..
"Unit 100_zn" = ZONE            
   TYPE             = CONDITIONED
   MIN-FLOW-RATIO   = 1
   FLOW/AREA        = 0.5
   OA-FLOW/PER      = 34.6035
   DESIGN-HEAT-T    = 72
   HEAT-TEMP-SCH    = "S1 Sys1 (PTAC) Heat Sch"
   DESIGN-COOL-T    = 75
   COOL-TEMP-SCH    = "S1 Sys1 (PTAC) Cool Sch"
   SIZING-OPTION    = ADJUST-LOADS
   SPACE            = "Unit 100"
   ..

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

Answer 2

确保您需要提供Angular Library或任何您想要展示的内容或HTML模板

HTML 的

display-property="name"

我不知道您的所有设置，但此示例应该适合您。请启动它并与您的设置进行比较：

Demo in Plunker

<强> [编辑]

如果不是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>

更改为：

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

ng-tagsInput无效

2 个答案: