带有多个和异步选项的 ui-select 问题

Question

我对 ui-select 指令（AngularJS 1.6.4，Ui-select 0.19.8）有问题。
我在这里创建了小提琴。

如果输入超过 3 个字符，它应该在下拉列表中显示联系人。 （我现在什至不尝试过滤任何内容，返回相同的联系人列表）。 它第一次运行良好，然后其他时候没有显示下拉列表。

我使用异步方式返回结果，因此它会在 1 秒后调用我的“刷新”函数。

有人能帮我理解为什么第一次后没有显示下拉列表吗？

（另外，如果有人知道我为什么需要强制display: block for the <ul>标签 - cf CSS ）

谢谢

HTML

<body ng-app="myApp">
  <div body ng-controller="ctrl as ctrl">

    <div class="element">
      Selected Contacts:<br>
      <div ng-repeat="contact in ctrl.contacts" class="contact">
        {{ contact }}
      </div>
    </div>

    <ui-select multiple ng-model="ctrl.contacts" class="element">
      <ui-select-match placeholder="Pick one...">{{$item}}</ui-select-match>
      <ui-select-choices
                         position="down"
                         refresh="ctrl.refreshContacts($select.search)"
                         refresh-delay="1000"
                         minimum-input-length="3"
                         repeat="person in ctrl.people">
        <div ng-bind-html="person | highlight: $select.search"></div>
      </ui-select-choices>
    </ui-select>

    <div class="element">
      <div ng-repeat="log in ctrl.logs track by $index" >
        <div>
          {{log}}
        </div>
      </div>
    </div>
  </div>
</body>

JS

var myApp = angular.module('myApp',  ['ngSanitize','ui.select']);

myApp.controller("ctrl", [function () {

  var ctrl = this;
  ctrl.logs=[];
  ctrl.refreshContacts = function(search) {
    var people = [
      "mickael",
      "pierre",
      "anna",
      "alice",
      "bob"
    ];
    ctrl.people = people;
    ctrl.logs.push("refreshContacts called")
  }

  ctrl.people = [];

}]);

CSS

.element {
  margin-bottom: 20px;
}

.contact {
  display: inline-block;
  margin: 5px;
  padding: 5px 8px;
  background: grey;
}

/* why do I need this ?! */
.ui-select-choices {
  display: block;
}

Answer 1

如果我没记错的话，在同时使用最小输入长度和刷新时会出现一个错误。 我通过删除最小输入长度并在刷新函数中添加一个 if 语句来解决这个问题。

ctrl.refreshContacts = function(search) {
    if(search == undefined || search.length < 3){
        return;
    }
    else{
      people = [
        "mickael",
        "pierre",
        "anna",
        "alice",
        "bob"
      ];
      ctrl.people = people;
    }
  }

带有多个和异步选项的 ui-select 问题

问题描述

1 个解决方案

解决方案1
2 已采纳 2019-06-14 13:44:47

带有多个和异步选项的 ui-select 问题

问题描述

1 个解决方案

解决方案1 2 已采纳 2019-06-14 13:44:47

解决方案1
2 已采纳 2019-06-14 13:44:47