Как обеспечить ui-select постоянным выбором? - PullRequest
Новая
       6

Как обеспечить ui-select постоянным выбором?

0 голосов
/ 25 мая 2018

У меня есть выпадающий список с множеством значений.Я использую ui-select для фильтрации значений при вводе пользователем.Я не хочу показывать более 30 значений одновременно.Однако я хочу проинформировать пользователя о наличии дополнительных данных, если пользователь продолжит запись / фильтрацию.Как бы вы решили это?

Моя идея заключалась в том, чтобы каким-то образом добавить дополнительный отключенный элемент в список, который читает что-то вроде 'More results...', если имеется более 30 элементов.Есть ли способ предоставить ui-select постоянный выбор, который он не фильтрует?Если прокрутить выпадающий список, станет ясно, что данных больше, но они не отображаются. 

        <ui-select ng-model="vm.selectedOption" close-on-select="true" on-select="vm.optionSelected($item)" spinner-enabled="true">
            <ui-select-match placeholder="{{'Select option'}}">
                <span ng-bind="$select.selected.name"></span>
            </ui-select-match>
            <ui-select-choices
                repeat="option in vm.options"
                refresh="vm.loadOptions($select.search)"
                refresh-delay="200"
                ui-disable-choice="option.isConstantChoice=== true"
            >
                <div ng-bind-html="option.name | highlight: $select.search"></div>
            </ui-select-choices>
        </ui-select>

1 Ответ

0 голосов
/ 25 мая 2018

Либо добавьте дополнительный элемент в массив, который вы используете для генерации, либо, что еще лучше, отделите реальные данные от пользовательского интерфейса и добавьте к этому элементу что-то вроде: 

var html='<div ng-if="' + expressionForShowingelement + '">Value</div>',
    el = document.getElementById('targetelementId');

angular.element(el).append( $compile(html)($scope) )

И тогда исходный источник останетсято же самое и пользовательский интерфейс отделен от данных / логики.Будьте осторожны, чтобы не смешивать одинарные и двойные кавычки и не разбивать HTML.

Не забудьте установить id, на который вы нацеливаетесь, с помощью append() позже и отключить элемент для выбора.

Кроме того, имейте в виду, что если вы реагируете на событие вне AngularJS, вам нужно позвонить по номеру $apply.

...