How to use jQuery Select2 with AngularJS

Question

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 co

Answer 1

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.

Answer 2

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

Answer 3

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",)

:)

Answer 4

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>