Как я могу смотреть новую строку поиска Angular -ui new ui-select (прежний ui-select2)?

Я заметил, что Angular -UI прекратил свою директиву UI-Select2 в пользу нового UI-Select (с несколькими темами - select2, bootstrap, selectize).

Он выглядит следующим образом:

<ui-select multiple ng-model="multipleDemo.colors" theme="select2" ng-disabled="disabled" style="width: 300px;">
    <ui-select-match placeholder="Select colors...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="color in availableColors | filter:$select.search">
        {{color}}
    </ui-select-choices>
</ui-select>

<p>Selected: {{multipleDemo.colors}}</p>

Изначально мой selectbox должен быть пустым, но готов к набору символов, который представляет собой строку длиной не менее 4 символов, а затем вызывает вызов API для получения списка предлагаемых значений, которые должны заполнять поле. Затем будет выбрано одно значение, и поиск необходимо повторить по мере необходимости.

Сначала я пробовал $watch с ng-model, который в этом случае multipleDemo.colors (используя этот пример из демонстраций). API-вызов никогда не возникал, и тогда я понял, почему. Фактическая модель не изменяется вообще, потому что она изменяется только при выборе (мой selectbox пуст, поэтому ничего нельзя выбрать).

Мое заключение состоит в том, что я должен (быть в состоянии) $watch добавлен как фильтр, а именно filter: $select.search.

Кто-нибудь знает, как я должен использовать его в своем контроллере?

Это:

$scope.$watch('$select.search', function(newVal){
    alert(newVal);
});

не работает.

EDIT: Для справки обратитесь к этому краткому обсуждению: Можно ли добавить поддержку пользовательской функции запроса, например select2?

ИЗМЕНИТЬ 2:

Я решил это, используя $emit изнутри директивы, чтобы значение теперь доступно в моем контроллере. Но теперь я хотел бы знать, как я могу переопределить эту часть директивы, поэтому сама директива может быть оставлена ​​нетронутой, чтобы она не прерывалась в будущих обновлениях?

Ответы

Ответ 1

Я решил это, создав событие в нужном месте в директиве, а затем $emitting он - в конечном итоге я могу прослушивать событие в своем контроллере и использовать его значение.

Недостатком этого является то, что я поместил его непосредственно в стороннюю директиву, чтобы его нельзя было безопасно обновлять. Мне нужно найти способ переопределить эту директиву. Если у вас есть идеи, сообщите мне.

Ответ 2

Используйте атрибут refresh в элементе <ui-select-choices> для вызова функции в своей области с помощью $select.search в качестве параметра:

<ui-select-choices repeat="color in multipleDemo.availableColors | filter:$select.search"
                   refresh="refreshColors($select.search)"
                   refresh-delay="0">
    {{color}}
</ui-select-choices>

Затем используйте функцию (refreshColors() в этом фрагменте) для обновления multipleDemo.availableColors соответственно.

Вы также можете использовать атрибут refresh-delay, чтобы указать, сколько миллисекунд должно отменить функцию, чтобы она не вызывалась слишком много раз подряд.

Я также положил availableColors на multipleDemo, как вы это сделали для multipleDemo.colors, а рекомендуется.

Ссылка: ui-select директива wiki в разделе Примеры: Async.

Ответ 3

Кажется, что есть атрибут on-select, см. пример Github:

<ui-select ng-model="person.selected" on-select="someFunction($item, $model)" [...]>
  [...]
</ui-select>

Ответ 4

Используйте ngInit для получения значения,

<div ui-select ng-init="mySelect = $select"></div>
<button ng-click="search(mySelect.search)">Search</button>

Вместо этого вы можете смотреть 'mySelect'

$scope.$watch('mySelect.search', function(newVal){
    alert(newVal);
});

Ответ 5

Почувствуйте меня, это мой первый ответ на SO.

Итак, текущий верхний ответ не работает для меня. Просто хочу предоставить другой вариант. Свойство refresh для ui-select-choice не вызывает именованную функцию в моей области.

Я следил за информацией в своих документах для доступа к выбору пользовательского интерфейса для пользовательских функций. Создайте пользовательскую директиву, в которой вы смотрите $select.search как

myModule.directive('myUiSelect', function() {
  return {
    require: 'uiSelect',
    link: function(scope, element, attrs, $select) {
      scope.$watch('$select.search', function (search) {
        if (search) {
          ...
        }
      });
    }
  };
});