开发者社区> 科技探索者> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

angular checkbox 全选和反选功能

简介:
+关注继续查看

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

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


IT达仁

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
手把手教你实现GridView中Checkbox全选
手把手教你实现GridView中Checkbox全选
30 0
CSS3自定义checkbox复选框
在线演示 本地下载
671 0
使用css修改checkbox选择框的样式
二. 修改思路: 给原本的checkbox框加上visibility: hidden;属性,使其隐藏同时又占据原本在页面上面的位置,说直白点就是,使checkbox看不见,但是仍然占有原来的位置。
1373 0
使用js操作checkbox
我们在项目中经常会遇到这个问题:使用js判断checkbox框是否被选中以及使用js对checkbox进行操作。 其实这些需求很简单,这里给出使用原生js和jQuery来完成这些需求。
1014 0
关于checkbox自动选中
checkbox是比较常用的,无论是权限管理还是博客的文章的标签类型的勾选,或者是上下级部门及其公司,都会用的到的。 今天主要讲的是checkbox自动根据值选中。 可参考我之前的文章:checkbox选中并通过ajax传数组到后台接收 js代码: //截取URL参数 function GetRequest() { var fullURL = window.
1184 0
input checkbox 复选框大小修改
有的时候,需要使用复选框,但是复选框有时候默认的太小,这时候就需要加大复选框。 解决方法: 其实就是zoom属性,这个是放大的意思,可以设置为180%,这样就会比之前大很多。
1142 0
css重写checkbox样式
一、前言 默认的checkbox长这样: 空闲 服务中 有点丑,我想把它变成这样: 二、实现 1、checkbox 难看的框框隐...
1112 0
5487
文章
0
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载