Instead using ui-select, I'm using jQuery select2 in AngularJS. I created custom directive for select2, for ng-model. I get the value from ng-model. But when I update the select2 on default, it doesn't work. I'm using select2 v4.0.3.
Directive
App.directive('jsSelect2', function ($timeout) {
return {
link: function (scope, element, attrs) {
jQuery(element).select2();
scope.$watch(attrs.ngModel, function(){
$timeout(function(){
element.trigger('change.select2');
},100);
});
}
};
});
HTML
<select id="update_created_by" data-js-select2="" name="update_created_by"
data-placeholder="To Who" ng-model="anc.update_created_by"
ng-options="c.name for c in anc_staffs"
required="required" class="form-control">
</select>
Controller
$scope.anc_staffs = [{id:1, name:'abel'},{id:2, name:'john'}];
jQuery("#update_created_by").val(1); // Doesn't work, show empty
jQuery("#update_created_by").val(1).trigger('change.select2'); // Doesn't work, show empty
Check this working code.
just add below code.
$scope.anc = {};
$scope.anc.update_created_by = $scope.anc_staffs[0];
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script data-require="angular.js@1.5.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.11/angular.min.js" data-semver="1.5.11"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" />
<style>
.select2-container {
width: 100px !important;
}
</style>
<script>
var app = angular.module('plunker', []);
app.controller('MainCtrl', function ($scope) {
$scope.anc_staffs = [{ id: 1, name: 'abel' }, { id: 2, name: 'john' }];
$scope.anc = {};
$scope.anc.update_created_by = $scope.anc_staffs[0];
});
app.directive('jsSelect2', function ($timeout) {
return {
link: function (scope, element, attrs) {
jQuery(element).select2();
scope.$watch(attrs.ngModel, function () {
$timeout(function () {
element.trigger('change.select2');
}, 100);
});
}
};
});
</script>
</head>
<body>
<div ng-app="plunker" ng-controller="MainCtrl">
<select id="update_created_by" data-js-select2="" name="update_created_by"
data-placeholder="To Who" ng-model="anc.update_created_by"
ng-options="c.name for c in anc_staffs"
required="required" class="form-control">
</select>
</div>
</body>
</html>