How To Default Select2 In Angularjs
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 o
Solution 1:
Check this working code.
just add below code.
$scope.anc = {};
$scope.anc.update_created_by = $scope.anc_staffs[0];
<htmlxmlns="http://www.w3.org/1999/xhtml"><head><title></title><scriptsrc="https://code.jquery.com/jquery-1.12.4.js"></script><scriptdata-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><scriptsrc="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script><linkrel="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><divng-app="plunker"ng-controller="MainCtrl"><selectid="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>Solution 2:
The problem of model being out of sync is a typical problem that ours when 2 different libraries don't sync. jQuery select2 will need to trigger certain angular calls in order to ensure model values are committed. Since that is beyond the control of a user of a library we run into this sort of known problems among others. Unless you have select2.
When using AngularJS it is a best practice to use components natively written in AngularJS. Hence libraries like angular-ui, ui-select exists.
I am saying there is no clean way to solve this problem.
Try
var $element = $('select').select2();
// Use the following inside your $timeout
$element.trigger('change');
Post a Comment for "How To Default Select2 In Angularjs"