Проблема с ui-select с несколькими и асинхронными параметрами - PullRequest
Новая
       18

Проблема с ui-select с несколькими и асинхронными параметрами

2 голосов
/ 14 июня 2019

У меня проблема с директивой ui-select (AngularJS 1.6.4, Ui-select 0.19.8).
Я создал скрипку здесь .

Этодолжен показывать контакты в выпадающем списке I, если набрать более 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;
}

1 Ответ

2 голосов
/ 14 июня 2019

Если я правильно помню, есть ошибка при использовании как минимальной длины ввода, так и обновления.Я решил эту проблему, удалив минимальную длину ввода и добавив оператор if внутри функции обновления. 

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