Question

而是使用ui-select，我在AngularJS中使用jQuery select2。我为ng-model创建了select2的自定义指令。我从ng-model获得了价值。但是当我在默认情况下更新select2时，它不起作用。我正在使用select2 v4.0.3。

指令

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>

控制器

$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

Answer 1

检查此工作代码。

只需添加以下代码。

$scope.anc = {};
$scope.anc.update_created_by = $scope.anc_staffs[0];

＆＃13;

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

＆＃13;

Answer 2

当两个不同的库不同步时，模型不同步的问题是我们的典型问题。 jQuery select2将需要触发某些角度调用，以确保提交模型值。由于这超出了图书馆用户的控制范围，我们遇到了这类已知的问题。除非你有select2。

使用AngularJS时，最好使用AngularJS中原生编写的组件。因此，存在像angular-ui，ui-select这样的库。

我说没有干净的方法来解决这个问题。

尝试

var $element = $('select').select2(); // Use the following inside your $timeout $element.trigger('change');

如何在angularJS中默认select2

2 个答案: