Как я могу наблюдать за изменениями строки поиска 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, чтобы получить список предлагаемых значений, которые должны заполнить поле. Затем будет выбрано одно значение, и поиск следует повторять по мере необходимости.

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

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

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

это:

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

не работает.

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

EDIT 2:

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

10
angular-ui angularjs angularjs-directive angularjs-scope ui-select2

5 ответов

использовать на <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 атрибут, чтобы указать, сколько миллисекунд до debounce функция, поэтому она не вызывается слишком много раз подряд.

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

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

16

Кажется, есть

10

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

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

вы можете alse смотреть "mySelect" вместо

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

Медведь со мной, это мой первый ответ на это.

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

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

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

а потом включить директива на <ui-select my-ui-select> тег.

1

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

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

-1