最近做写出了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;//主机列表默认选择为falsevar filecheck = false;//文件列表默认选择为falsevar 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;//组机组主机IDhh.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;//配置文件内容Idcc.path = $scope.configList[j].path;//配置文件路径cc.content = $scope.configList[j].content;//配置文件内容cc.fileUrl = $scope.configList[j].fileUrl;//配置文件内容fileUrlfileList.push(cc);//重新赋值给文件列表}}//没有选择要发布的文件if(fileList.length<=0){alert("请选择要发布的文件");return;}if (!confirm("确认要发布吗？")) {return;}item.fileList = fileList;//将选择的配置文件列表赋值给fileListvar 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;//主机列表默认选择为falsevar filecheck = false;//文件列表默认选择为falsevar 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;//组机组主机IDhh.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;//配置文件内容Idcc.path = $scope.configList[j].path;//配置文件路径cc.content = $scope.configList[j].content;//配置文件内容cc.fileUrl = $scope.configList[j].fileUrl;//配置文件内容fileUrlfileList.push(cc);//重新赋值给文件列表}}if(fileList.length<=0){alert("请选择要回滚的文件");return;}if (!confirm("确认要回滚吗？")) {return;}item.fileList = fileList;//将选择的配置文件列表赋值给fileListvar 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=trueif(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;//主机组主机IDselecthostgrouphostList.push(gh);}$scope.hostgrouphostList=new Array();//重新初始化hostgrouphostList$scope.hostgrouphostList=selecthostgrouphostList;}else{//如果是反选主机，则selectChk=falsefor(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;//主机组主机IDselecthostgrouphostList.push(gh);}$scope.hostgrouphostList=new Array();//重新初始化hostgrouphostList$scope.hostgrouphostList=selecthostgrouphostList;}};//配置文件全选$scope.configall= function (c,v) {var selectconfigList=new Array();//如果是反选配置文件，则selectChkcont=trueif(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;//文具内容Idch.path= $scope.configList[j].path;//路径ch.content= $scope.configList[j].content;//内容ch.fileUrl= $scope.configList[j].fileUrl;//文件URLch.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=falsefor (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;//文具内容Idch.path= $scope.configList[j].path;//路径ch.content= $scope.configList[j].content;//内容ch.fileUrl= $scope.configList[j].fileUrl;//文件URLch.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);

本文转自杨海龙的博客博客51CTO博客，原文链接http://blog.51cto.com/7218743/1687942如需转载请自行联系原作者

IT达仁