直接上代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.staticfile.org/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
<script src="select2.js"></script>
<style type="text/css">
@import url("select2.css");
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<select id="companyCode" class="form-control" style="width:200px">
<option value=""></option>
</select>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.names = [{ id: 0, text: 'aaa' }, { id: "ZBXS", text: 'bbb' }, { id: 2, text: 'ccc' }];
var list = [];
$.each($scope.names, function (n, value) {
var obj = {id: value.id, text: value.text};
// var obj = {id: value.clientCod, text: value.cClientNam};
list.push(obj);
});
$("#companyCode").select2({
data: list,
placeholder: '请选择公司',
allowClear:true
});
// 选择时触发事件并赋值
$("#companyCode").on("select2:select", function (e) {
var data = $(this).val();
console.log(data);
});
$("#companyCode").select2("val", ["ZBXS"]);//赋值
console.log(str2value +";"+strtext);
var res=$("#companyCode").select2("data")[0]; //取值
console.log("res:"+res);
});
</script>
</body>
</html>
在列表循环中，select2的应用
html
<tr ng-repeat="cargo in vm.cargos" on-finish-render-filters>
<td>
<select class="form-control select2" id="{{$index}}" style="width:120px" >
<option value=""></option>
</select>
</td>
</tr>
js
$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
CcargoService.findCcargoInOrg(function (data){
var list =[];
$.each(data, function (n, value) {
var obj = {id: value.cargoCod, text: value.cCargoNam};
list.push(obj);
});
for(var i=0;i<vm.cargos.length;i++){
$("#"+i).select2({
data: list,
placeholder: '搜索名称',
allowClear:true
});
$("#"+i).select2("val", [vm.cargos[i].cargoCod]);//可用
}
$(".select2").on("select2:select",function(e){
console.log( $(this).val());
for(var i=0;i<vm.cargos.length;i++){
if($("#"+i+" option:checked").val()==$(this).val()){
vm.cargos[i].cargoNam = $("#"+i+" option:checked").text();
vm.cargos[i].cargoCod = $(this).val();
$scope.$apply();
}
}
})
});
});
源码下载地址：
https://download.csdn.net/download/lz20120808/11116620
注意：
如果从后台查询的下拉列表数据存在null值，则该控件查询时，前端select2.js遍历每个子项模糊匹配会报错
