代码1

最新推荐文章于 2019-10-11 10:56:31 发布

缘分亦至

最新推荐文章于 2019-10-11 10:56:31 发布

阅读量248

点赞数

本文链接：https://blog.csdn.net/Mr_Cao_/article/details/80158581

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="js/jquery-1.11.0.min.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.datas=[
{"id":"001","name":"张三","sex":"男","hoppy":"1995-04-24","city":"北京-西二旗"},
{"id":"002","name":"李四","sex":"女","hoppy":"1985-02-20","city":"郑州-二七区"},
{"id":"003","name":"赵六","sex":"男","hoppy":"1973-05-21","city":"南京-南开区"},
{"id":"004","name":"曹操","sex":"女","hoppy":"1998-04-15","city":"内蒙古-海拉尔区"}];

//性别数据源
$scope.proList = [
{
"sexs":"男"
},
{
"sexs":"女"
}
];
//地址数据源
$scope.citylist=[
{
"pname":"北京",
"citys":[
{"sname":"西二旗"},
{"sname":"西三旗"}
]
},
{
"pname":"郑州",
"citys":[
{"sname":"二七区"},
{"sname":"新郑市"}
]
},
{
"pname":"南京",
"citys":[
{"sname":"南开区"},
{"sname":"中山市"}
]
}
];
//省市改变事件
$scope.cityChange = function(){
$scope.newcity2=$scope.newcity.citys[0];
}
$scope.checkAll;

$scope.nameT;
$scope.hoppyT;

//判断姓名输入框
$scope.nameS=function(){
if($scope.nameT.length<3||$scope.nameT.length>30){
alert("用户名不小于3个字符且不大于30个字符");
}else if($scope.nameT==undefined){
alert("用户名不能为空");
}
};
$scope.hoppyS=function(){
if($scope.hoppyT==undefined){
alert("不能为空");
}
};
//添加
$scope.addIsShow = false;
$scope.addAll=function(){
if($scope.nameT.length<3 || $scope.nameT.length>30 || $scope.hoppyT==undefined){
alert("用户信息不符合规范");
$scope.nameT=null;
$scope.hoppyT=null;
}else{
var a={};
// 随机数作为id
var n = Math.round(Math.random()*1000);
a.id=n;
a.name=$scope.nameT;
a.hoppy=$scope.hoppyT;
a.sex=$scope.newsex.sexs;
a.city=$scope.newcity.pname+"----"+$scope.newcity2.sname;
$scope.datas.push(a);
$scope.addIsShow = false;
$scope.showTable = true;

$scope.nameT=null;
$scope.hoppyT=null;

}
};
//复选框全选反选
$scope.selectAll = false;
// //点击标题的复选框，实现全选功能
$scope.nockeckAllFun = function(){
for (var i = 0; i < $scope.datas.length; i++) {
$scope.datas[i].ck1 = $scope.check;
}
}
//全选反选
$scope.fanxuan = function(){
for (var i = 0; i < $scope.datas.length; i++) {
$scope.datas[i].ck1 = !$scope.datas[i].ck1;
}
}

//批量删除，如果用户点击批量删除时都没有选中需要删除的数据则提示用户需要先选中数据
$scope.showTable=true;
//批量删除
$scope.deleteAll = function(){
for (var i = 0; i < $scope.datas.length; i++) {
if($scope.datas[i].ck1){
$scope.datas.splice(i,1);
i--;
}
}
}

//删除按钮
$scope.deleteName=function(_name){
if(confirm("是否确定删除")){
for(var v=0;v<$scope.datas.length;v++){
var s=$scope.datas[v];
if(s.name==_name){
$scope.datas.splice(v,1);
alert("删除成功");
break;
}
}
}

};

});

</script>
<style>
table{
text-align: center;
}
</style>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
姓名：<input type="text" ng-model="nameT" ng-blur="nameS();"/>   
性别：<select
ng-model="newsex"
ng-options="item.sexs for item in proList"
ng-init="newsex=proList[0]"
>
</select>  
生日：<input type="text" ng-model="hoppyT" ng-blur="hoppyS();"/>  
住址：<select
ng-model="newcity"
ng-options="item.pname for item in citylist"
ng-init="newcity=citylist[0]"
ng-change="cityChange();"
>
</select>
<select
ng-model="newcity2"
ng-options="item2.sname for item2 in newcity.citys"
ng-init="newcity2=newcity.citys[0]"
>
</select>  
<input type="button" value="添加" style="background-color: yellow;width: 100px;" ng-click="addAll();"/>
<br /><br />
<input type="button" value="全选/反选"style="background-color: yellow;" ng-click="fanxuan();" id="zhuce"/>    
<input type="button" value="批量删除" style="background-color: red;" ng-click="deleteAll();"/><br />
<table border="1px" cellpadding="1px" cellspacing="0px" bordercolor="red" width="900px" ng-show="showTable">
<tr style="background-color: cadetblue;">
<td><input type="checkbox" ng-model="check" ng-click="nockeckAllFun()"/></td>
<td>姓名</td>
<td>性别</td>
<td>生日</td>
<td>住址</td>
<td>删除</td>
</tr>
<tr ng-repeat="d in datas">
<td><input type="checkbox" ng-model="d.ck1"/></td>
<td>{{d.name}}</td>
<td>{{d.sex}}</td>
<td>{{d.hoppy}}</td>
<td>{{d.city}}</td>
<td><input type="button" value="删除" ng-click="deleteName(d.name);"/></td>
</tr>
</table>
</center>
</body>
</html>

缘分亦至

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
代码1

&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script src="js/angular.min.js" type="text/javascript" charset=&
复制链接

扫一扫

代码1

“相关推荐”对你有帮助么？