Wie benutze ich jQuery Select2 mit eckigen

Ich versuche jQuery (2.2.1) Select2 (3.5.2) mit Angularjs (1.5) zu verwenden, habe aber eine schwierige Zeit, die Daten aus der Auswahlbox zu greifen. Ich habe versucht ui-select und ich könnte Daten abrufen ... aber würde oft den Browser beim Suchen abstürzen, war schrecklich langsam und insgesamt instabil (5000-10000 Artikel). jQuery Select2 ist schnell und reaktionsfähig, selbst bei einer großen Anzahl von Einträgen, aber ich kann das Objekt nicht finden, wenn ich eine Option auswähle.Wie benutze ich jQuery Select2 mit eckigen

<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' 
    }]; 

}]);

Gibt es eine Möglichkeit, diese beiden arbeiten gut zu bekommen?

Quelle

2016-03-21 Alex

https://github.com/angular-ui/ui-select –

Ich habe dies implementiert, aber auf großen Listen wurde es langsam, und würde regelmäßig Browser abstürzen. – Alex

Wie groß? Ich denke, dass die langen Listen und Winkelkombinationen nicht optimal sind. Das bedeutet, dass jedes eckige Plugin für so etwas zerquetscht wird. Versuchen Sie, die Suche auf den Server zu verschieben. –

nach der Suche, wie $ scope Funktionen von jQuery zugreifen zu können, fand ich, dass der angular.element.scope() verwendet. Funktion (x) würde mir erlauben, für jeden select2 des Schlüssel zu übergeben Element, auf dem "Change" -Ereignis, in Winkel, die dann manipuliert werden können.

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

Quelle

2016-04-12 13:36:47 Alex

Können Sie teilen arbeiten JSFIDDLE nur für eine Demo? –

über Bower "Winkel-ui-select" Install: "= 0.12.1" Dann in Ihrem 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>

nie direkt jQuery Plugins initialisieren. . Suche über das Internet, wie jQuery-Module mit kantigem zu integrieren (es könnte etwas kompliziert aussehen, aber es ist ganz einfach, es in der Art und Weise aufrufen Sie haben auch nie funktionieren ....

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

Alternative für ui-select ist:

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

Quelle

2016-03-21 15:45:16 qwetty

ui-select ist unbrauchbar mit der Anzahl der Elemente, die ich bevölkern muss, ist entweder sehr langsam (30-45 Sekunden pro Suche) oder outright stürzt den Browser ab. – Alex

In diesem Fall verwenden Sie https://mbenford.github.io/ngTagsInput/. In der Tat ist es Tag-Eingabe, gibt Ihnen aber die Möglichkeit, Min- und Max-Tags zu definieren. Unterstützung für Autocomplite ist ziemlich gut. Vor einiger Zeit habe ich alle schweren Inputs ersetzt (mit> 1k Items). – qwetty

Vielen Dank für die Referenz eckigen-gewählten-Localytics, aber die aktuelle Version ist [1.4.0] (https://github.com/leocaseiro/angular-chosen/releases/tag/1.4.0) –

Eckige Version von Select2 ist verfügbar. Hier prüfen: https://www.npmjs.com/package/angular-select2

(Der Kodex ist hier: https://github.com/rubenv/angular-select2)

Diese Angular Bibliothek Select2 als Abhängigkeit verwendet und hilft Select2 in Ihre Formulare zu integrieren.

Quelle

2017-11-01 13:01:41

Ich habe versucht Angular-Select2, aber es litt an den gleichen Leistungsproblemen wie ui-select, Absturz des Browsers oder dauert 1+ Minuten, um eine Liste von 600-900 Elemente zu laden. – Alex

Wie benutze ich jQuery Select2 mit eckigen

Antwort

Verwandte Themen