最近做写出了angularjs 全选和反选的数据绑定功能，分享出来给大家，有什么不对的地方请大家多多指教，angularjs 强大的数据绑定功能完全展现了新一代的web 开发的，完美的和html 应用在一起，实现新一代的技术完美结合。废话就不多说了，下面看代码：
1.html 页面：
<table class="table" > <!--主机组主机列表--> <tr style="background-color: #555555;color:white;"> <th><input type="checkbox" parentName="hostId" ng-model="master" ng-checked="master" ng-click="hostgrouphostall(master,tesarry)"> 选择: </th> <th>主机名称</th> <th>所属集群</th> </tr> <tbody ng-repeat="item in hostgrouphostList" > <tr > <td><input type="checkbox" name="hostId" ng-checked="master" ng-model="item.selectChk"> </td> <td>{{item.hostName }}</td> <td>{{item.clusterName }}</td> </tr></table>2.angular js 控制器:(function (angular) { var platformApp = angular.module(‘emsApp‘); //主机页面控制器 platformApp.registerController(‘hostgroupController‘, function ($scope, $http) { $scope.currentPage = 1; $scope.totalPage = 1; $scope.pageSize = $scope.configInfo.pageSize; $scope.paginationConf = {}; $scope.hostgroupRow = -1; $scope.item = null;//获取修改对象data $scope.message = false; $scope.success = false; $scope.fail = false; $scope.saveFlag = false;//是更新操作还是添加 $scope.hostInfoList = null;//组机集合信息 console.log(‘初始化host控制器...‘) var dimName = null; var homeName = null; var id = 0; //确定发布配置文件内容confirmpublicfile $scope.confirmpublicfile=function(item){ var item= new Object(); var hostList=new Array();//主机列表 var fileList=new Array();//文件列表 var operType=new Array();//发布还是回滚 var hostcheck = false;//主机列表默认选择为false var filecheck = false;//文件列表默认选择为false var params; //循环读取组机组主机列表就需要重新组装 for(var i=0;i<$scope.hostgrouphostList.length;i++) { hostcheck = $scope.hostgrouphostList[i].selectChk; if (hostcheck) { var hh = new Object(); hh.hostGroupHostId = $scope.hostgrouphostList[i].hostGroupHostId;//组机组主机ID hh.hostName = $scope.hostgrouphostList[i].hostName;//主机名称 hostList.push(hh);//重新组装到hostList } } //没有要选择的发布主机 if(hostList.length<=0) { alert("请选择要发布的主机"); return; } item.operType="deploy";//操作类型是发布 item.hostList = hostList;//将选择的发布主机列表重新赋值给hostList //如果选择的是配置内容列表就需要重新组装 for (var j = 0; j < $scope.configList.length; j++) { filecheck = $scope.configList[j].selectChkcont; if (filecheck) { var cc = new Object(); cc.fileName = $scope.configList[j].fileName;//文件名 cc.configContentId = $scope.configList[j].configContentId;//配置文件内容Id cc.path = $scope.configList[j].path;//配置文件路径 cc.content = $scope.configList[j].content;//配置文件内容 cc.fileUrl = $scope.configList[j].fileUrl;//配置文件内容fileUrl fileList.push(cc);//重新赋值给文件列表 } } //没有选择要发布的文件 if(fileList.length<=0) { alert("请选择要发布的文件"); return; } if (!confirm("确认要发布吗？")) { return; } item.fileList = fileList;//将选择的配置文件列表赋值给fileList var json=angular.toJson(item); console.log("json:"+json); //调用 kitty 服务接口进行发布 var url="/itpub-web/plugins/configcenter_mgr_ConfigInfo_allotJSON.htm"; params = { ‘dJson‘: json }; var option = $.ajax({ cache: true, type: "POST", url: url, data: params, async: true, scriptCharset: ‘utf-8‘,//中文编码处理 success: function (data) { var data = eval(‘(‘ + data + ‘)‘); console.log("data:"+data.errorCode); if(data.errorCode==0) { if(data.result==undefined) { alert("发布异常！"); $("#configfilecontentModal").modal("hide");//关闭发布窗口 }else { //如果发布有误，调用接口查询错误原因，并显示在列表中。 var deployId = data.result; var resultUrl = "/itpub-web/plugins/configcenter_mgr_ConfigHistory_getListJSON.htm?configHistoryBean.deployId=" +deployId; $http.get(resultUrl).success(function (data) { console.log(‘====return:‘ + data.data); $scope.congfighistoryList = data.data; $("#configfilecontentModal").modal("hide");//关闭发布窗口 $("#configfilehistoryModal").modal("show");//显示发布失败或成功结果 }); } } if(data.errorCode==1) { alert("发布成功！"); $("#configfilecontentModal").modal("hide"); console.log("result:"+data.result); } } }) } //确定回滚配置文件内容confirmrollbackfile $scope.confirmrollbackfile=function(item){ var item= new Object(); var hostList=new Array();//主机列表 var fileList=new Array();//文件列表 var operType=new Array();//发布还是回滚 var hostcheck = false;//主机列表默认选择为false var filecheck = false;//文件列表默认选择为false var params; //循环读取组机组主机列表就需要重新组装 for(var i=0;i<$scope.hostgrouphostList.length;i++) { hostcheck = $scope.hostgrouphostList[i].selectChk; if (hostcheck) { var hh = new Object(); hh.hostGroupHostId = $scope.hostgrouphostList[i].hostGroupHostId;//组机组主机ID hh.hostName = $scope.hostgrouphostList[i].hostName;//主机名称 hostList.push(hh);//重新组装到hostList } } if(hostList.length<=0) { alert("请选择要回滚的主机"); return; } item.operType="rollback";//操作类型为回归 item.hostList = hostList;//将选择的主机列表赋值给hostList //如果选择的是配置内容列表就需要重新组装 for (var j = 0; j < $scope.configList.length; j++) { filecheck = $scope.configList[j].selectChkcont; if (filecheck) { var cc = new Object(); var state=$scope.configList[j].state; if(state!="S0A") { alert("配置文件状态不是发布中,不能回滚!"); return; } cc.fileName = $scope.configList[j].fileName;//文件名 cc.configContentId = $scope.configList[j].configContentId;//配置文件内容Id cc.path = $scope.configList[j].path;//配置文件路径 cc.content = $scope.configList[j].content;//配置文件内容 cc.fileUrl = $scope.configList[j].fileUrl;//配置文件内容fileUrl fileList.push(cc);//重新赋值给文件列表 } } if(fileList.length<=0) { alert("请选择要回滚的文件"); return; } if (!confirm("确认要回滚吗？")) { return; } item.fileList = fileList;//将选择的配置文件列表赋值给fileList var json=angular.toJson(item);//json 转换 console.log("json:"+json); //调用kitty 平台接口 var url="/itpub-web/plugins/configcenter_mgr_ConfigInfo_allotJSON.htm"; params = { ‘dJson‘: json }; var option = $.ajax({ cache: true, type: "POST", url: url, data: params, async: true, scriptCharset: ‘utf-8‘,//中文编码处理 success: function (data) { var data = eval(‘(‘ + data + ‘)‘); console.log("data:"+data.errorCode); if(data.errorCode==0) { if(data.result==undefined) { alert("回滚异常！"); $("#rollbackfilecontentModal").modal("hide");//关闭回滚窗口 }else { //如果回滚错误，调用接口查询错误原因，并显示在列表中。 var deployId = data.result; var resultUrl = "/itpub-web/plugins/configcenter_mgr_ConfigHistory_getListJSON.htm?configHistoryBean.deployId=" + deployId; $http.get(resultUrl).success(function (data) { console.log(‘====return:‘ + data.data); $scope.congfighistoryList = data.data; $("#rollbackfilecontentModal").modal("hide");//关闭回滚窗口 $("#configfilehistoryModal").modal("show");//显示发布失败或成功结果 }); } } //成功的就不显示了，直接hide 了 if(data.errorCode==1) { alert("回滚文件成功！"); $("#rollbackfilecontentModal").modal("hide"); console.log("result:"+data.result); } } }) } //主机全选 $scope.hostgrouphostall= function (c,v) { var selecthostgrouphostList=new Array(); //如果是全选主机，则selectChk=true if(c==true){ for(var i=0;i<$scope.hostgrouphostList.length;i++) { var gh=new Object(); gh.selectChk=true;//主全选标志 gh.hostName= $scope.hostgrouphostList[i].hostName;//主机名称 gh.hostGroupHostId = $scope.hostgrouphostList[i].hostGroupHostId;//主机组主机ID selecthostgrouphostList.push(gh); } $scope.hostgrouphostList=new Array();//重新初始化hostgrouphostList $scope.hostgrouphostList=selecthostgrouphostList; }else{ //如果是反选主机，则selectChk=false for(var i=0;i<$scope.hostgrouphostList.length;i++) { var gh=new Object(); gh.selectChk=false;//主机全选标志 gh.hostName= $scope.hostgrouphostList[i].hostName;//主机名称 gh.hostGroupHostId = $scope.hostgrouphostList[i].hostGroupHostId;//主机组主机ID selecthostgrouphostList.push(gh); } $scope.hostgrouphostList=new Array();//重新初始化hostgrouphostList $scope.hostgrouphostList=selecthostgrouphostList; } }; //配置文件全选 $scope.configall= function (c,v) { var selectconfigList=new Array(); //如果是反选配置文件，则selectChkcont=true if(c==true){ for (var j = 0; j < $scope.configList.length; j++) { var ch = new Object(); ch.selectChkcont=true;//全选文件标志 ch.fileName= $scope.configList[j].fileName;//文件名 ch.fileDesc= $scope.configList[j].fileDesc;//文具描述 ch.configContentId= $scope.configList[j].configContentId;//文具内容Id ch.path= $scope.configList[j].path;//路径 ch.content= $scope.configList[j].content;//内容 ch.fileUrl= $scope.configList[j].fileUrl;//文件URL ch.version= $scope.configList[j].version;//版本 ch.versionDesc= $scope.configList[j].versionDesc;//版本描述 ch.state=$scope.configList[j].state;// 状态 selectconfigList.push(ch); } $scope.configList=new Array();//重新初始化configList $scope.configList=selectconfigList;//将全选的配置文件重新赋值给configList }else{ //如果是反选配置文件，则selectChkcont=false for (var j = 0; j < $scope.configList.length; j++) { var ch = new Object(); ch.selectChkcont=false;//全选文件标志 ch.fileName= $scope.configList[j].fileName;//文件名 ch.fileDesc= $scope.configList[j].fileDesc;//文件描述 ch.configContentId= $scope.configList[j].configContentId;//文具内容Id ch.path= $scope.configList[j].path;//路径 ch.content= $scope.configList[j].content;//内容 ch.fileUrl= $scope.configList[j].fileUrl;//文件URL ch.version= $scope.configList[j].version;//文件版本 ch.versionDesc= $scope.configList[j].versionDesc;//版本描述 ch.state=$scope.configList[j].state;// 状态 selectconfigList.push(ch); } $scope.configList=new Array();//重新初始化configList $scope.configList=selectconfigList; } }; });})(window.angular);
时间： 2024-10-08 19:45:31