Question

我对ui-select指令（AngularJS 1.6.4，Ui-select 0.19.8）有疑问。
我创建了小提琴here。

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

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

有人可以帮助我理解为什么第一次后没有显示下拉菜单吗？

（同样，如果有人知道为什么我需要对display: block标签强制使用<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选择问题

1 个答案: