ui-select multiselect在显示选择中非常慢 [英] ui-select multiselect is very slow in displaying the choices

问题描述

我遇到了这个问题，但我不知道如何解决.我在页面中使用了 ui-select多重选择.首先，对获取数据的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?

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

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屋！