interface utilisateur-sélectionnez multiselect est très lent à l'affichage de l'choix
J'ai rencontré ce problème, et je ne sais pas comment le résoudre. J'ai utilisé un interface utilisateur-sélectionnez multiselect dans ma page. Tout d'abord, une http.demande est faite à une adresse url qui permet d'obtenir les données, puis l'interface utilisateur-sélectionnez les choix sont peuplées. Les données big - la longueur des données est en 2100. Ces données sont affichées comme des choix. (Les données sont lues au début pendant le chargement de la page et est stocké dans un tableau)
Mais le problème est que chaque fois que je clique sur la sélection multiple pour sélectionner un choix, il faut 4-5 secondes pour remplir la liste et la page devient très lent. Que dois-je faire pour réduire ce temps?
Le choix des données est stocké dans un tableau, le type de données est tableau de chaînes de caractères.
<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>
dans le contrôleur,
$scope.selectedFields = {};
$scope.selectedFields.name = [];
$scope.init = function() {
$http.get(url)
.success( function(response, status, headers, config) {
availableFields = response;
})
.error( function(err) {
});
};
$scope.init();
Si pas de cette façon, est-il d'autres options/choix je peux travailler avec ce qui ne veut pas être en retard montrant l'sélectionnez-le choix?
OriginalL'auteur akashrajkn | 2015-07-14
Vous devez vous connecter pour publier un commentaire.
C'est un problème connu dans l'interface utilisateur-sélectionnez. J'ai essayé l'une des façons suivantes, à la fois le travail
1) Il existe une solution de contournement pour cette utilisation
Cela limite le choix de l'affichage à 100, mais tous les choix peuvent être sélectionnés. Regardez ce fil pour plus de détails.
2) Depuis un certain temps, il est nécessaire d'afficher la liste entière dans les choix, 1) n'est pas une option viable. J'ai utilisé une autre bibliothèque - selectize.js. Voici un plunker démo sur la page
OriginalL'auteur akashrajkn
Ici est la solution complète qui orne
uiSelectChoices
directive.Éléments sont remplis au fur et à mesure que l'utilisateur fait défiler.
Prend également soin de recherches dans les parchemins.
Travaille aussi pour toutes les valeurs de
position={auto, up, down}
Exemple
Travail Plnkr
Aussi avec Avec v0.19.5
La directive
$select.pageOptions
dansrepeat="person in $select.pageOptions.people
?Merci pour l'explication et pour le code. Votre solution ne fonctionne en effet. Si vous avez le temps, vous devriez essayer de l'ouvrir un PR pour l'interface utilisateur-sélectionnez l'équipe à prendre en compte.
Essayez de plnkr.co/modifier/GXkvtT?p=preview pour le groupement - semble très bien fonctionner.
Nous avons un bug: Si les données (obtenu à partir du serveur) dans
att all-choices
est retourné après l'interface utilisateur-sélectionnez rendus, nous vous reçu le message d'erreur:Cannot read property 'length' of undefined
à la lignepagingOptions.page * pagingOptions.pageSize < allItems.length
. Je fonctionne si j'utilise ng-si, pour ce cas. Vous avez de meilleures suggestions pour moi?PR de l'interface utilisateur-sélectionnez pensions serait génial!
OriginalL'auteur bhantol
Comme l'a dit, l'interface utilisateur-sélectionnez est tout à fait avoir quelques problèmes de performance, mais il y a une solution pour contourner la limite de problème.
Si vous suivez akashrajkn approche ensuite, vous remarquerez qu'il sera en fait de découper une pièce importante de données, car il ne fera que rendre 100 à l'heure. Il existe un correctif qui a passé les tests unitaires et il peut être trouvé sur le fil ici:
https://github.com/angular-ui/ui-select/pull/716
En gros, si vous stockez le fichier javascript en local, vous pouvez ajuster la unminified version. Tout ce que vous devez faire est de mettre en œuvre les changements qu'il a faite dans la demande d'extraction et elle devrait aider de manière significative. Afin d'appliquer le facteur limitant, prendre un regard sur les ci-dessous, modifiés exemple:
Permettra de limiter vos données dans le menu déroulant tout en maintenant le niveau de la cohérence nécessaire.
Droit, ce qui va se passer, parce que les problèmes de performances avec de l'interface utilisateur, sélectionnez. La seule façon de contourner cela est de fait aller dans le fichier et de supprimer la majorité de code inutile qui est centré autour de la keydown/keyup événements (inutile, sauf si vous en avez besoin bien sûr). Il y a d'autres select2 plugins pour anguleux, mais il semble qu'ils ne sont pas pris en charge à l'interface utilisateur de sélectionner. Et, bien sûr, vous pouvez toujours essayer de réécrire les fonctionnalités dont vous avez besoin.
affiche uniquement les 10, mais montre à la recherche
OriginalL'auteur BuddhistBeast
Parce que je ne peux pas laisser un commentaire (pas assez rep) j'écris cela comme une réponse, et je suis désolé c'est pas de réponse pour le problème.
@bhantol j'ai changé la ligne de code suivante à votre solution qui fonctionne parfaitement pour moi jusqu'à présent
Cela empêche d'éléments dupliqués à partir indiquant si l'utilisateur est de commencer à écrire un filtre, puis le supprime.
Aussi je viens de comprendre que si la liste est plus petit que 20 articles, il ne fonctionnera pas, donc j'ai changé:
:
Peut-être que cela aidera à vous en quelque sorte et encore désolé de ne pas répondre à la question.
person.id as person in $select.pageOptions.people
OriginalL'auteur d3orn