ui-select multiselect 显示选项的速度很慢 [英] ui-select multiselect is very slow in displaying the choices

问题描述

我遇到了这个问题，我不知道如何解决.我在我的页面中使用了 ui-select multiselect.首先，向获取数据的 url 发出 http.get 请求，然后填充 ui-select 选项.数据很大——数据的长度是2100.这个数据是作为选择显示的.(数据是在页面加载开始的时候取的，存放在一个数组中)

I ran into this problem, and I don't know how to solve it. I have used a ui-select multiselect in my page. First, a http.get request is made to a url which gets the data, then the ui-select choices are populated. The data is big - the length of the data is 2100. This data is to be shown as choices. (The data is fetched at the beginning during the loading of the page and is stored in an array)

但是问题是我每次点击多选来选择一个选项时，填充列表需要4-5秒，页面变得很慢.我该怎么做才能减少这个时间?

But the problem is each time I click on the multiselect to select a choice, it takes 4-5 seconds to populate the list and the page becomes very slow. What do I do to reduce this time?

选择数据存储在一个数组中，数据类型是字符串数组.

The choices data is stored in an array, the datatype is array of strings.

  <ui-select multiple ng-model="selectedFields.name"  style="width: 100%;">
    <ui-select-match placeholder="Select fields...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="fields in availableFields | filter:$select.search">
      {{fields}}
    </ui-select-choices>
  </ui-select>

在控制器中，

$scope.selectedFields = {};
$scope.selectedFields.name = [];

$scope.init = function() {

    $http.get(url)
        .success( function(response, status, headers, config) {
            availableFields = response;
        })
        .error( function(err) {
        });
};

$scope.init();

如果不是这样，我可以使用任何其他选项/选择而不延迟显示选择选项吗?

If not this way, is there any other options/choice I can work with which doesn't delay showing the select-choices?

推荐答案

这是 ui-select 中的一个已知问题.我尝试了以下方法，都有效

This is a known issue in ui-select. I tried the following ways, both work

1) 对此有一个解决方法 - 使用

1) There is a workaround for this - use

| limitTo: 100

这将选项显示限制为 100，但可以选择所有选项.查看此主题了解更多详情.

This limits the choice display to 100 but all the choices can be selected. Look at this thread for more details.

2) 由于有些时候，需要在选项中显示整个列表，1) 不是一个可行的选项.我使用了一个不同的库 - selectize.js.这是页面中给出的 plunker 演示

2) Since some of the time, there is a need to display the entire list in the choices, 1) is not a viable option. I used a different library - selectize.js. Here's a plunker demo given in the page

这篇关于ui-select multiselect 显示选项的速度很慢的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！