How to use jQuery Select2 with AngularJS
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?
Answer
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.