Медленное поведение выпадающего списка angular-ui-select при большом списке элементов в модальном режиме

Я использую angular-ui-select со списком из ~1500 элементов в модальном окне начальной загрузки.

Каждое действие пользователя выполняется с задержкой в ​​2 секунды. Я попытался повысить производительность, используя «минимальную длину ввода», но фильтр не работает.

Пример Plunkr: https://plnkr.co/edit/H0kbeR4kHfZFjsBnpjBC?p=preview

МОЙ HTML:

<ui-select multiple sortable="true" ng-model="vm.selected" theme="select2" style="width: 100%;">
              <ui-select-match placeholder="Select...">{{ $item.name }}</ui-select-match>
              <ui-select-choices repeat="item in vm.items | filter: $select.search" minimum-input-length="2">
                <div ng-bind-html="item.name | highlight: $select.search"></div>
              </ui-select-choices>
            </ui-select>
  1. Кто-нибудь знает, как улучшить производительность?

  2. Как применить фильтр минимума символов?

    Спасибо.


angularjs ui-select angular-ui-select
person badigard    schedule 28.06.2016    source источник

Ответы (3)


arrow_upward
11
arrow_downward

Я решил это с помощью LimitTo, проверив длину поиска:

limitTo: ($select.search.length <= 2) ? 0 : undefined"

полный код:

<ui-select-choices 
  repeat="item in ctrl.items | filter: $select.search | limitTo: ($select.search.length <= 2) ? 0 : undefined">
person Rafael Zeffa    schedule 12.07.2016
comment
или вы можете использовать другую альтернативу. github.com/Modulr/mdr-angular-select2 - person Gery; 18.02.2017

arrow_upward
1
arrow_downward

Я считаю, что минимальная длина будет работать только с использованием функции обновления. Производительность по-прежнему остается проблемой, так как проблем много.

Документация по uiselect

Минимальное количество символов, необходимое для срабатывания функции обновления

person Jefiozie    schedule 28.06.2016
comment
Насколько я понимаю, функция «обновить» предназначена только для определения источника данных в виде запроса $http. В моем примере у меня уже есть все данные, хранящиеся в локальной переменной. - person badigard; 29.06.2016
comment
Это правильно, но минимальная длина ввода работает только с функцией обновления. (насколько я знаю). Некоторый код пользовательского интерфейса ниже, где вы можете видеть, что минимальная длина ввода запускает функцию обновления. if (!attrs.minimumInputLength || $select.search.length ›= attrs.minimumInputLength) { $select.refresh(attrs.refresh); } - person Jefiozie; 29.06.2016
comment
Так что мне лучше попробовать найти другую библиотеку для выбора элементов из списка? - person badigard; 29.06.2016
comment
В зависимости от ситуации вы можете добавить ограничение в список Ограничить ссылку . Скажем, вы изначально загружаете 10/20 элементов. Если пользователь затем выполняет поиск определенного значения, вы можете использовать функцию обновления, как описано в вики. Во-вторых, вы можете загрузить список и добавить только те значения, которые ищет пользователь. - person Jefiozie; 29.06.2016
comment
Попробую реализовать ленивую загрузку по списку. Связана ли проблема с производительностью с тем, что ng-repeat создает слишком много наблюдателей? - person badigard; 29.06.2016
comment
Не знаю, есть ли связь между ними, но на github открыто много вопросов о производительности. Пример проблемы с производительностью - person Jefiozie; 29.06.2016
comment
Спасибо. В этом примере я вместо этого использовал angular-selectize. - person badigard; 29.06.2016

arrow_upward
0
arrow_downward

Если вы также упорядочиваете список с помощью orderBy (что еще больше замедлит его), убедитесь, что он последний в цепочке фильтров:

repeat="item in list | propsFilter: {name:$select.search} | limitTo:100 | orderBy:'name'">

Теперь он будет упорядочивать только отфильтрованные значения, а не весь список. Это несколько увеличивает производительность, но не устраняет основные проблемы.

person Mikko    schedule 27.11.2018