angularjs下select2的使用demo

最新推荐文章于 2021-01-23 12:29:53 发布

坚持奋斗的李洛克

最新推荐文章于 2021-01-23 12:29:53 发布

阅读量3k

点赞数

分类专栏：前端文章标签： angularjs中select2的使用

本文链接：https://blog.csdn.net/lz20120808/article/details/89308643

版权

前端专栏收录该内容

13 篇文章 0 订阅

订阅专栏

直接上代码：

<!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遍历每个子项模糊匹配会报错

坚持奋斗的李洛克

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
angularjs下select2的使用demo

直接上代码：<!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...
复制链接

扫一扫