How to use jQuery Select2 with AngularJS

jquery angularjs jquery-select2 angularjs-select2

23,991

Solution 1

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>

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

23,991

Author by

Alex

I work as a Business & Manufacturing Intelligence Engineer at TriCore Inc. and program VB.Net applications in my spare time.

Updated on July 30, 2022

Comments

Alex almost 2 years

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?