如何在angularJS中默认select2答案

【问题标题】：How to default select2 in angularJS如何在angularJS中默认select2
【发布时间】：2017-12-07 22:31:05
【问题描述】：

我在 AngularJS 中使用 jQuery select2，而不是使用 ui-select。我为 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

【问题讨论】：

你检查过我的解决方案了吗？

标签： javascript angularjs jquery-select2 jquery-select2-4

【解决方案1】：

检查此工作代码。

只需添加以下代码。

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

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

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

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

试试

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

【讨论】：