Comment faire pour utiliser jQuery Select2 angulaire

Je suis en train d'utiliser jQuery (2.2.1) Select2 (3.5.2) avec Angularjs (1.5) mais vais avoir un moment difficile saisissant les données dans la boîte de sélection. J'ai essayé interface utilisateur-sélectionnez et j'ai pu récupérer les données... mais souvent planter le navigateur lors de la recherche, a été horriblement lent et de l'ensemble de la distribution instable (5000-10000 éléments). jQuery Select2 est rapide et réactif, même avec le grand nombre d'entrées, mais je ne peux pas sembler obtenir l'objet lors de la sélection d'une option.

<head>
    <script src="~/Scripts/angular.min.js"></script>
    <script src="~/Scripts/CustomScripts/app.js"></script>
    <script src="~/Scripts/jquery-2.2.1.js"></script>
    <script src="~/Scripts/select2.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".sel").select2();
        });
    </script>
<head>
<body ng-app="app" ng-controller="MainCtrl">
    <select class="sel" data-ng-model="country.selected" ng-options="country.Name for country in countries | orderBy: 'Name'">
<body>

app.js

var app = angular.module('app', []);

app.controller('MainCtrl', ['$scope', '$http', function ($scope, $http) {

    $scope.country = {};

    $scope.countries = [{
        name: 'Australia',
    }, {
        name: 'United States'
    }, {
        name: 'United Kingdom'
    }];

}]);

Est-il un moyen d'obtenir ces deux fonctionne parfaitement?

github.com/angular-ui/ui-select
J'ai mis en place, mais sur les grandes listes, il est devenu lent, et régulièrement crash navigateurs.
Quelle est son ampleur? Je pense que les longues listes et angulaire de la combinaison n'est pas optimale. C'est à dire que tout angulaire du plugin pour quelque chose comme ce sera écrasé. Essayez de déplacer la recherche pour le serveur.
Pour les grandes listes vous pouvez récupérer les résultats à partir du serveur async - j'ai travaillé avec cette modoue et de l'exécuter en douceur, jamais charshed ou quelque chose comme ça
Il y a 3 sélectionnez les cases qui atteignent entre 5-10k chaque

OriginalL'auteur Alex | 2016-03-21

  1. 2

    Angulaire de la Version de Select2 est disponible. Vérifiez Ici : https://www.npmjs.com/package/angular-select2

    ( Le Code est ici: https://github.com/rubenv/angular-select2 )

    Ce Angulaire de la Bibliothèque utilise Select2 que la dépendance et l'aide à l'intégration Select2 dans vos formulaires.

    J'ai essayé Angulaires-Select2, mais il souffre des mêmes problèmes de performances que de l'interface utilisateur, sélectionnez, le plantage du navigateur ou de prendre 1+ minutes pour charger une liste de 600-900 éléments.

    OriginalL'auteur Ganesh Kumar Ponnuswamy

  2. 0

    Installer via la charmille "angular-ui-sélectionnez": "=0.12.1"
    Ensuite, dans votre code html.....

    <ui-select multiple
                   class="col-md-8 input-sm"
                   on-select="someMethod()"
                   on-remove="someMethod()"
                   ng-model="country.selected"
                   theme="bootstrap">
            <ui-select-match placeholder="Select field...">{{$item.name}}</ui-select-match>
            <ui-select-choices
                    repeat="field in countries | filter:$select.search">
                <div ng-bind-html="field.name | highlight: $select.search"></div>
            </ui-select-choices>
        </ui-select>

    Jamais initialiser les plugins jQuery directement. La recherche sur internet comment intégrer jQuery modules Angulaire (ça peut paraître compliqué mais c'est assez facile. L'appel de la façon que Vous n'aurez jamais fonctionne....

    <script type="text/javascript">
    $(document).ready(function () {
        $(".sel").select2();
    });
</script>

    Alternative pour l'interface utilisateur-sélectionnez: 

    angular-chosen ("angular-chosen-localytics": "~1.0.7",)

    🙂

    interface utilisateur-sélectionnez est inutilisable avec le nombre d'articles que j'ai besoin de remplir, de sa soit très lente (de 30 à 45 secondes par recherche) ou carrément planter le navigateur.
    Dans ce cas, utiliser les mbenford.github.io/ngTagsInput. En fait, c'est la balise d'entrée mais Vous donne la possibilité de définir des min et max de balises. Soutien pour autocomplite est assez bonne. Il y a quelques temps j'ai remplacé tous les lourds entrée (avec >1k d'éléments).
    Merci pour la référence angulaire-choisi-de localytics, mais la version actuelle est 1.4.0

    OriginalL'auteur qwetty

  3. 0

    Après avoir cherché comment accéder $champ d'application des fonctions de jQuery, j'ai trouvé que l'utilisation de l'angle.de l'élément.champ d'application().la fonction(x) me permettrait de passer la clé pour chaque select2 élément, sur l'événement "change", dans angulaire, qui peut ensuite être manipulé.

    <script type="text/javascript">
    $(document).ready(function () {
        $(".sel").select2({
            placeholder: "Select a project..."
        })
        .on("change", function (e) { angular.element(document.getElementById("MainCtrl")).scope().testfunction(); });
    });
</script>
    Pouvez-vous partager de travail JSFIDDLE juste pour une démo?
    J'ai trouvé un codepen: codepen.io/drebrikov/stylo/awpEI

    OriginalL'auteur Alex