最近做写出了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达仁
