[英]Problem with ui-select with multiple and async options
I have a problem with the ui-select directive (AngularJS 1.6.4, Ui-select 0.19.8).我对 ui-select 指令(AngularJS 1.6.4,Ui-select 0.19.8)有问题。
I have created the fiddle here .我在这里创建了小提琴。
It's supposed to show contacts in the dropdown I if type more than 3 chars.如果输入超过 3 个字符,它应该在下拉列表中显示联系人。 (I don't even try to filter anything at the moment, the same list of contacts is returned). (我现在什至不尝试过滤任何内容,返回相同的联系人列表)。 It works well the first time, then the other times no dropdown is shown.它第一次运行良好,然后其他时候没有显示下拉列表。
I use the async way of returning results so it calls my "refresh" function after 1sec.我使用异步方式返回结果,因此它会在 1 秒后调用我的“刷新”函数。
Can someone help me understand why no dropdown is displayed after the first time ?有人能帮我理解为什么第一次后没有显示下拉列表吗?
(also, if someone knows why I need to force the display: block
for the <ul>
tag - cf CSS ) (另外,如果有人知道我为什么需要强制display: block
for the <ul>
标签 - cf CSS )
Thanks谢谢
HTML 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 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 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 I am remembering correctly there is a bug when using both minimum-input-length and refresh.如果我没记错的话,在同时使用最小输入长度和刷新时会出现一个错误。 I solved this problem by removing minimum-input-length and adding an if statement inside refresh function.我通过删除最小输入长度并在刷新函数中添加一个 if 语句来解决这个问题。
ctrl.refreshContacts = function(search) {
if(search == undefined || search.length < 3){
return;
}
else{
people = [
"mickael",
"pierre",
"anna",
"alice",
"bob"
];
ctrl.people = people;
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.