6

I am trying to use jQuery (2.2.1) Select2 (3.5.2) with Angularjs (1.5) but am having a difficult time grabbing the data from the select box. I have tried ui-select and I could retrieve data... but would often crash the browser when searching, was horribly slow and overall unstable (5000-10000 items). jQuery Select2 is fast and responsive, even with the large number of entries, but I cant seem to get the object when I select an 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'
    }];

}]);

Is there a way to get these two working nicely?

georgeawg
  • 48,608
  • 13
  • 72
  • 95
Alex
  • 509
  • 1
  • 11
  • 26
  • https://github.com/angular-ui/ui-select – Alon Eitan Mar 21 '16 at 14:47
  • I've implemented this, but on large lists, it became slow, and would regularly crash browsers. – Alex Mar 21 '16 at 14:52
  • How large? I think that the long lists and angular combination is not optimal. That's mean that any angular's plugin for something like this will crushed. Try to move the search to the server. – Mosh Feu Mar 21 '16 at 14:54
  • For large lists you can fetch the results from the server [async](https://github.com/angular-ui/ui-select/wiki/ui-select) - I've been working with this modoue and it run smooth, never charshed or anything like that – Alon Eitan Mar 21 '16 at 14:56
  • There 3 select boxes that reach between 5-10k each – Alex Mar 21 '16 at 14:59
  • Each box can select only one choice or its multiselect ? – qwetty Mar 21 '16 at 15:16
  • Only need single select – Alex Mar 21 '16 at 15:24

4 Answers4

2

After searching how to access $scope functions from jQuery, I found that using the angular.element.scope().function(x) would allow me to pass the key for each select2 element, on the "change" event, into angular, which can then be manipulated.

<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>
Alex
  • 509
  • 1
  • 11
  • 26
2

Angular Version of Select2 is available. Check Here : https://www.npmjs.com/package/angular-select2

( The Code is here: https://github.com/rubenv/angular-select2 )

This Angular Library uses Select2 as dependency and helps integrating Select2 in your forms.

Ganesh Kumar Ponnuswamy
  • 172
  • 1
  • 6
  • I have tried Angular-Select2, but it suffered from the same performance problems as ui-select, crashing the browser or taking 1+ minutes to load a list of 600-900 elements. – Alex Nov 01 '17 at 19:50
0

Install via bower "angular-ui-select": "=0.12.1" Then in your 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>

Never initialize jQuery plugins directly. Search over internet how to integrate jQuery modules with Angular (it might look bit complicated but it's quite easy. Calling it in the way You did will never works....

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

Alternative for ui-select is: 

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

:)

qwetty
  • 1,238
  • 2
  • 10
  • 24
  • ui-select is unusable with the number of items I need to populate, its either very slow (30-45 seconds per search) or outright crashes the browser. – Alex Mar 21 '16 at 15:54
  • In that case use https://mbenford.github.io/ngTagsInput/. In fact it's tag input but gives You ability to define min and max tags. Support for autocomplite is quite good. Some time ago I replaced all heavy input (with >1k of items). – qwetty Mar 21 '16 at 16:02
  • Thanks for reference angular-chosen-localytics, but the current version is [1.4.0](https://github.com/leocaseiro/angular-chosen/releases/tag/1.4.0) – Leo Caseiro Mar 22 '16 at 23:27
-1

You can use this plugin ,
ngx-select2

Add jQuery and Select2 lib

<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>

If you want to add javascript and css libraries , you msust added from angular.json example : 

 "styles": [
      "node_modules/bootstrap/dist/css/bootstrap.css",
      "src/styles.css",
      "src/assets/css/select2.min.css"
    ],
    "scripts": [
      "node_modules/bootstrap/dist/js/bootstrap.js",
      "node_modules/jquery/dist/jquery.js",
      "src/assets/js/select2.min.js"
    ]

Install ngx-select2

npm i ngx-select2

Use select2 component

import { LSelect2Module } from 'ngx-select2';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    LSelect2Module
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

in html 

<l-select2 [(ngModel)]="selected" [data]="data" [options]="options" [disabled]="false" (valueChange)="valueChange($event)"></l-select2>

Options

  • data: select2 init data for select
  • options: select2 options
  • disabled: disable select2 component
  • valueChange: output. Fire on value change, same as ngModelChange
Abd Abughazaleh
  • 4,615
  • 3
  • 44
  • 53