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

У меня есть раскрывающийся список с возможностью поиска со многими значениями. Я использую 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>

angularjs ui-select

25.05.2018 14:33

Знаете ли вы, что директивы являются одной из самых мощных и универсальных функций Angular?

Директивы позволяют расширять HTML новыми элементами и атрибутами и даже создавать собственные структурные директивы для манипулирования DOM. С...

Разница между Angular и React

React и AngularJS - это два самых популярных фреймворка для веб-разработки. Оба фреймворка имеют свои уникальные особенности и преимущества, которые...

217

Ответы 1

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

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

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

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

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

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

Я понимаю вашу идею, но как бы вы добавили ее к элементу ui-select-choices? Когда я это сделаю, это все еще фильтруется.

— 25.05.2018 16:04

25.05.2018 14:57