我在我网站的很多地方使用jquery-select2插件。现在我需要将angularjs模型绑定添加到现有表单。我找到的最佳解决方案是angularjs wrapper ui-select2。但是这个包装器确实适用于jquery-select2版本4. *（它适用于旧的version 3.*，但是有一些错误） 这是我的Plunker
<!DOCTYPE html>
<html ng-app="MyApp">
<head>
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/css/select2.min.css" />
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.full.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.7/angular.min.js"></script>
<script src="select2.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="MyController">
<h1>Select2</h1>
<code>myModel1: {{myModel1 | json}}</code>
<select ui-select2="select2Options" ng-model="myModel1" style="width:100%" ng-focus="focus()">
</select>
<br>
<br>
<code>myModel2: {{myModel2 | json}}</code>
<select ui-select2="select2Options" ng-model="myModel2" style="width:100%" ng-focus="focus()" multiple>
</select>
</body>
</html>
var myAppModule = angular.module('MyApp', ['ui.select2']);
myAppModule.controller('MyController', function($scope) {
$scope.focus = function() {
console.log('focus event');
};
$scope.select2Options = {
allowClear: true,
ajax: {
url: "data.json",
data: function (term, page) {
return {};
},
processResults: function (data, page) {
return {results: data}
}
}
}
});
如何让ng-model工作？
如何使重点工作？
如何从服务器初始化具有定义值的select2？
我知道ui-select2已被弃用，但ui-select（原生角度）不合适。
P.S。我不知道为什么，但如果属性＆＃34;倍数＆＃34;已定义 - 查看Plunker。但也存在缺陷
例如：如果我点击＆＃34;清除＆＃34;，生成错误
＆＃34;未捕获的TypeError：无法读取属性＆＃39; id＆＃39;未定义＆＃34;