而是使用 ui-select ，我正在使用 jQuery select2在 AngularJS 中。我为 ng-model 的 select2 创建了自定义指令。我从 ng-model 获得值(value)。但是当我默认更新 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>
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
最佳答案
检查此工作代码。
只需添加以下代码。
$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>关于javascript - 如何在 angularJS 中默认 select2，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44906168/