如何在angularJS中默认选择2 [英] How to default select2 in angularJS
本文介绍了如何在angularJS中默认选择2的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
不是使用 ui-select ，而是使用 jQuery select2 .我为ng-model创建了select2的自定义指令.我从ng-model中获得了价值.但是，当我默认更新select2时，它不起作用.我正在使用select2 v4.0.3.
Instead using ui-select, I'm using jQuery select2 in AngularJS. I created custom directive for select2, for ng-model. I get the value from ng-model. But when I update the select2 on default, it doesn't work. I'm using 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
推荐答案
检查此工作代码.
只需添加以下代码即可.
just add below code.
$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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
