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达仁

相关文章
|
7月前
【实用】Angular中如何实现类似Vuex的全局变量状态变化功能?
【实用】Angular中如何实现类似Vuex的全局变量状态变化功能?
|
JavaScript 前端开发 API
Angular1.4.6框架简单读取数据库信息并渲染完成news新闻文章列表以及detail详情页功能(小试牛刀)
Angular1.4.6框架简单读取数据库信息并渲染完成news新闻文章列表以及detail详情页功能(小试牛刀)
|
JavaScript
angular实现全选,反选,批量删除,删除,全不选,倒序,模糊查找等功能
angular实现全选,反选,批量删除,删除,全不选,倒序,模糊查找等功能
103 0
angular40-angular实现todolist3编辑功能
angular40-angular实现todolist3编辑功能
106 0
angular40-angular实现todolist3编辑功能
|
JavaScript Shell API
Angular5.1以及更多可用功能
我们很高兴的宣布Angular5.1版本发布了。这是一个小版本,包含几个小的功能和bug修复。我们也发布了Angular Cli的1.6版本,以及Angular Material的第一个稳定版本。
1354 0
|
4月前
|
API 开发者 UED
PrimeFaces:JSF的魔法衣橱,解锁UI设计的无限可能!
【8月更文挑战第31天】本文介绍如何结合 JSF(JavaServer Faces)和 PrimeFaces 构建美观且功能强大的现代用户界面。PrimeFaces 提供丰富的 UI 组件库,包括按钮、输入框、数据网格等,支持现代 Web 标准,简化界面开发。文章通过具体示例展示如何使用 `&lt;p:inputText&gt;` 和 `&lt;p:calendar&gt;` 等组件创建用户表单,并用 `&lt;p:dataTable&gt;` 展示数据集合,提升 JSF 应用的易用性和开发效率。
63 0
|
4月前
|
开发者 安全 SQL
JSF安全卫士:打造铜墙铁壁,抵御Web攻击的钢铁防线!
【8月更文挑战第31天】在构建Web应用时,安全性至关重要。JavaServer Faces (JSF)作为流行的Java Web框架,需防范如XSS、CSRF及SQL注入等攻击。本文详细介绍了如何在JSF应用中实施安全措施,包括严格验证用户输入、使用安全编码实践、实施内容安全策略(CSP)及使用CSRF tokens等。通过示例代码和最佳实践,帮助开发者构建更安全的应用,保护用户数据和系统资源。
57 0
|
4月前
|
开发者 C# C++
揭秘:如何轻松驾驭Uno Platform,用C#和XAML打造跨平台神器——一步步打造你的高性能WebAssembly应用!
【8月更文挑战第31天】Uno Platform 是一个跨平台应用程序框架,支持使用 C# 和 XAML 创建多平台应用,包括 Web。通过编译为 WebAssembly,Uno Platform 可实现在 Web 上运行高性能、接近原生体验的应用。本文介绍如何构建高效的 WebAssembly 应用:首先确保安装最新版本的 Visual Studio 或 VS Code 并配置 Uno Platform 开发环境;接着创建新的 Uno Platform 项目;然后通过安装工具链并使用 Uno WebAssembly CLI 编译应用;最后添加示例代码并测试应用。
123 0
|
4月前
|
前端开发 开发者 安全
JSF支付功能大揭秘:探索如何在Java世界中实现安全无缝的在线支付体验
【8月更文挑战第31天】在电子商务和在线交易日益普及的今天,实现在线支付功能已成为许多Web应用的必备需求。JavaServer Faces (JSF) 作为一种流行的Java Web框架,提供了丰富的组件和工具来构建用户界面,包括与支付网关集成以实现在线支付。支付网关是处理信用卡和借记卡支付的系统,在商家和银行之间起到桥梁作用。本文将探讨如何使用JSF与支付网关集成,以及实现在线支付功能时需要考虑的关键点
50 0
|
4月前
|
开发者 前端开发 开发框架
JSF与移动应用,开启全新交互体验!让你的Web应用轻松征服移动设备,让用户爱不释手!
【8月更文挑战第31天】在现代Web应用开发中,移动设备的普及使得构建移动友好的应用变得至关重要。尽管JSF(JavaServer Faces)主要用于Web应用开发,但结合Bootstrap等前端框架,也能实现优秀的移动交互体验。本文探讨如何在JSF应用中实现移动友好性,并通过示例代码展示具体实现方法。使用Bootstrap的响应式布局和组件可以确保JSF页面在移动设备上自适应,并提供友好的表单输入和提交体验。尽管JSF存在组件库较小和学习成本较高等局限性,但合理利用其特性仍能显著提升用户体验。通过不断学习和实践,开发者可以更好地掌握JSF应用的移动友好性,为Web应用开发贡献力量。
53 0