如何在 angularJS 中默认选择 2

Question

而不是在 AngularJS 中使用 ui-select, I'm using jQuery select2。我为 select2 和 ng-model 创建了自定义指令。我从 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

模型不同步的问题是我们的一个典型问题，当2个不同的库不同步时。 jQuery select2 将需要触发某些 angular 调用以确保提交模型值。由于这超出了图书馆用户的控制范围，我们运行将此类已知问题纳入其中。除非你有 select2.

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

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

尝试

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

Answer 2

检查此工作代码。

只需添加以下代码即可。

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

如何在 angularJS 中默认选择 2

How to default select2 in angularJS

javascript

angularjs

jquery-select2

jquery-select2-4