我对ui-select指令有问题(AngularJS 1.6.4，ui-select 0.19.8)。
我在这里创建了小提琴。
如果键入超过 3 个字符，它应该在下拉列表中显示联系人(我目前什至不尝试过滤任何内容，返回相同的联系人列表)。它第一次运行良好，然后其他时间不显示下拉列表。
我使用异步方式返回结果，因此它在 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;
}
如果我没记错的话，同时使用最小输入长度和刷新时会出现一个错误。我通过删除最小输入长度并在刷新函数中添加 if 语句来解决此问题。
ctrl.refreshContacts = function(search) {
if(search == undefined || search.length < 3){
return;
}
else{
people = [
"mickael",
"pierre",
"anna",
"alice",
"bob"
];
ctrl.people = people;
}
}