时间戳

首页 > 解决方案 > 如何为 ui-select 提供一个不变的选择？

angularjs - 如何为 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>

标签： angularjsui-select

解决方案

在您用于生成的数组中添加一个额外的元素，或者更好的解决方案是将真实数据与 UI 分开，并在该元素后面附加如下内容：

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

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

然后原始源保持不变，UI 与数据/逻辑分离。注意不要混合单引号和双引号并破坏 HTML。

不要忘记设置id您append()稍后定位的目标并禁用元素以供选择。

另外，请记住，如果您要响应 AngularJS 事件之外的事件，则需要调用$apply.

推荐阅读