【问题标题】:NgTagInput not showing auto-search resultsNgTagInput 不显示自动搜索结果
【发布时间】:2015-06-21 15:16:02
【问题描述】:

我正在尝试实现ngTagsInput,我想在其中实现电子邮件的自动搜索。为此,我写了下面的代码。但它不显示自动搜索结果

HTML:

<tags-input ng-model="compose.receiver"
            add-from-autocomplete-only="true" 
            min-length="1">
    <auto-complete source="loadReceiver($query)" 
                   min-length="0"
                   debounce-delay="0" 
                   max-results-to-show="10" 
                   loadOnEmpty="true">
    </auto-complete>
</tags-input>

控制器:

$scope.loadReceiver = function(query){
  return AdminInbox.loadReceiver(query);
}

服务:

angular.module('inboxes').factory('AdminInbox', ['$http','$q',
  function($http,$q) {
    return {
      loadReceiver: function(query) {
        console.log(query);
        var deferred = $q.defer();
        var receiver = $http.get('mailreceiver/'+query);
        console.log(receiver);
        return deferred.promise;
      }
    }
  }
]);

我成功得到以下格式的回复:

[{_id: "5579c9a4f3d71f8c2a4f1e3d"  email: "abc@gmail.com"},
{_id: "557f2cd3a571f9a41e4168f2"  email: "xyz@gmail.com"}]

【问题讨论】:

  • 您的 JSON 似乎无效。解析结果时确定没有JS错误?属性用逗号分隔。在简要了解 ngTagInput 之后,我认为响应对象应该包含一个 text 属性。 [{"text":"aaaaaa"}, {"text":"bbbbb"}]
  • 那么这是否意味着 Text 的 keyName 真的很有必要?我不能设置动态键,比如电子邮件吗?
  • 我不知道。请检查 ngTagInput API。有一堆安静的属性
  • 我先检查了一下,但找不到任何适合我的问题的解决方案,这就是我向 SO 提出这个问题的原因
  • 你在哪里看的??我认为displayProperty 听起来很有希望

标签: angularjs ng-tags-input


【解决方案1】:

拥有一个有效的 JSON 并设置 display-property 即可!

angular.module('app', ['ngTagsInput'])
  .run(function($rootScope) {
    $rootScope.source = [{
      _id: "5579c9a4f3d71f8c2a4f1e3d",
      email: "abc@gmail.com"
    }, {
      _id: "557f2cd3a571f9a41e4168f2",
      email: "xyz@gmail.com"
    }];

    $rootScope.compose = {
      receiver: []
    };
  });
<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.2.24/angular.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ng-tags-input/2.3.0/ng-tags-input.js"></script>
<div ng-app="app">
  <tags-input ng-model="compose.receiver" display-property="email" add-from-autocomplete-only="true" min-length="1">
    <auto-complete source="source" min-length="0" debounce-delay="0" max-results-to-show="10" loadOnEmpty="true" displayProperty="email">
    </auto-complete>
  </tags-input>
</div>

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2014-01-20
    • 1970-01-01
    • 1970-01-01
    • 2021-01-25
    • 2018-02-04
    • 2021-12-31
    相关资源
    最近更新 更多