本文共 4622 字，大约阅读时间需要 15 分钟。

要实现表格中如图所示的下拉框，点击“操作”时显示，点击其他地方时隐藏，并且每个下拉框的可选项根据版本号状态的不同而不同，

   
					    
						     
							      

							      
子系统的版本号
							      
版本号状态
							      
GIT分支
							      

						     
					    
					    
						     
							      
							      
							      
							      
							      
								
       
									
        操作 > 									
        
 
         
{ {item.name}}
 
         
{ {item.name}}
 
         
{ {item.name}}
 
         
{ {item.name}}
 
        
								
       
						     
					    
				   

js代码

//子系统版本列表        $scope.systemCode=document.getElementById("systemCode").value;        $scope.systemVersionList=function(){            $http.get('/systemVersion/' + $scope.systemCode).success(function (res) {                $scope.systemVersions = angular.copy(res.data);            });        };        $scope.systemVersionList();        //初始-隐藏所有列表        angular.forEach($scope.systemVersions,function(item){        	item.selected = false;        })//        点击显示        $scope.showOpration = function (currentItem, $event) {            $event.stopPropagation();            angular.forEach($scope.systemVersions, function (item) {                item.selected = false;            });            currentItem.selected = !currentItem.selected;        }                $(document).click(function(){        	 $scope.$apply(function(){             	angular.forEach($scope.systemVersions, function (item) {                    item.selected = false;                });        	 });        })                var develop = function(systemVersion){//预发布    		$scope.systemVersion = systemVersion;            $scope.systemVersion.gitBranch = "release-";            layer.open({                type: 1,                area: ['600px', '200px'], //宽高                skin: 'layui-layer-molv', //加上边框                title: '添加',                content: $('#system-version-update-pop')                , btn: ['预发布', '取消']                , yes: function (index, layero) {                    $http.put('/systemVersion/' + systemVersion.id + "/" + systemVersion.gitBranch + "/pre").success(result_handle);                    $scope.systemVersion = {};                    layer.close(index);                }            });    	}                var pre = function(systemVersion){//发布        	layer.confirm('确认项目已发布？', {                btn: ['确认', '取消'] //可以无限个按钮            }, function (index, layero) {                $http.put('/systemVersion/' + systemVersion.id + "/" + systemVersion.gitBranch + "/online").success(result_handle);                layer.close(index);            });        }                var online = function(systemVersion){//下线        	layer.confirm('确认项目已下线？', {                btn: ['确认', '取消'] //可以无限个按钮            }, function (index, layero) {                $http.put('/systemVersion/' + systemVersion.id + "/" + systemVersion.gitBranch + "/offline").success(result_handle);                layer.close(index);            });        }                var offline = function(systemVersion){//删除        	layer.confirm('此操作同时会删除此版本下面的所有项目，确认删除吗？', {                btn: ['删除', '取消'] //可以无限个按钮            }, function (index, layero) {                $http.delete('/systemVersion/' + systemVersion.id).success(result_handle);                layer.close(index);            });        }                var initJenkins = function(systemVersion){//初始化jenkins    		layer.confirm('此操作将删除并重新创建对应的Jenkins空间，是否继续？', {                btn: ['确定', '取消'] //可以无限个按钮            }, function (index, layero) {            	var index = layer.load(1, {          		  shade: [0.3,'#f5f5f5'] //0.3透明度的白色背景          		});          		$http.post('/initJenkins/'+systemVersion.id).success(function(response){          			if(response.success){          				layer.alert('操作成功');          				layer.close(index);            			}else{          				layer.msg("操作失败，原因：" + response.message);          				layer.close(index);           			}          		})            });        }                $scope.developList =[             {id:1,name:'预发布',state:develop},             {id:4,name:'删除',state:offline},             {id:5,name:'初始化Jenkins',state:initJenkins}        ];        $scope.preList = [		{id:2,name:'发布',state:pre},		{id:5,name:'初始化Jenkins',state:initJenkins}		];       	$scope.onlineList = [		{id:3,name:'下线',state:online},		{id:5,name:'初始化Jenkins',state:initJenkins}		];       	$scope.offlineList = [			{id:4,name:'删除',state:offline},			{id:5,name:'初始化Jenkins',state:initJenkins}		];                //选择操作按钮        $scope.selectOpration = function(item,systemVersion){        	if(systemVersion.selected){        		systemVersion.selected = false;        	}        	item.state(systemVersion);        }