个人中心
gpt4 book ai didi

javascript - ng-tagsInput 不工作

转载 作者：行者123 更新时间：2023-11-28 00:53:19 24 4
gpt4 key购买 nike

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

最佳答案

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

关于javascript - ng-tagsInput 不工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46069512/

24 4 0
文章推荐： javascript - JQuery 和 XHR 请求异步问题
文章推荐： c++ - 如何用参数覆盖构造函数并在单独的文件中实现它
文章推荐： html - 在 bootstrap 列中包含 mp4 视频
文章推荐： javascript - 根据用户对 javascript 'confirm' 的响应更改 Material Slide Toggle 的值
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com