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

回答1:

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>

回答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');

来源：https://stackoverflow.com/questions/44906168/how-to-default-select2-in-angularjs

标签

javascript