angularjs表单-白红宇的个人博客

angularjs表单

发布日期：2022-02-26 14:49:30 浏览次数：37 分类：技术文章

本文共 4117 字，大约阅读时间需要 13 分钟。

<!DOCTYPE html>

<html>

<head>

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>

姓名：<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>  

</tr>

<td>{

{d.name}}</td>

<td>{

{d.sex}}</td>

<td>{

{d.hoppy}}</td>

<td>{

{d.city}}</td>

</tr>

</table>

</center>

</body>

</html>

转载地址：https://blog.csdn.net/qq_31353347/article/details/80163768 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！

上一篇：Python学习之常用函数

下一篇：ionic新闻文章

发表评论

关于作者

喝酒易醉，品茶养心，人生如梦，品茶悟道，何以解忧？唯有杜康！

-- 愿君每日到此一游！

发表评论

最新留言

关于作者

推荐文章