如何在angularJS中默认select2
Posted
技术标签:
【中文标题】如何在angularJS中默认select2【英文标题】：How to default select2 in angularJS 【发布时间】：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
【问题讨论】：
你检查过我的解决方案了吗？ 【参考方案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');
【讨论】：
以上是关于如何在angularJS中默认select2的主要内容，如果未能解决你的问题，请参考以下文章