最近做写出了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);