angular增删改查加验证

AngularJS应用实例

最新推荐文章于 2024-11-08 10:01:37 发布

原创最新推荐文章于 2024-11-08 10:01:37 发布 · 261 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了一个使用AngularJS实现的增删改查功能的应用实例。该应用包括用户信息的添加、查询、修改和删除等功能，并实现了全选、批量删除及全部删除等操作。

<script type="text/javascript" src="js/angular.js"></script>
<script>
angular.module("myApp", [])
.controller("myCtrl", function($scope) {
$scope.arr = [];
for(var i = 1; i <= 5; i++) {
var s = {
id: i,
state: false,
name: "张三" + i,
pass: "123" + i,
age: 10 + i,
sex: "男"
}
var x = {
id: 6 + i,
state: false,
name: "王五" + i,
pass: "123" + i,
age: 10 + i,
sex: "女"
}
$scope.arr.push(s);
$scope.arr.push(x);
}
//模糊
$scope.Fname = ""
$scope.f1 = ""

/*$scope.fsex = function(){
alert($scope.Fsex)
}*/

//全选
$scope.qx = function() {
for(a in $scope.arr) {
$scope.arr[a].state = $scope.quanx;
}

}
//批量删除
$scope.delPl = function() {
for(var a = 0; a < $scope.arr.length; a++) {
if($scope.arr[a].state) {
$scope.arr.splice(a, 1);
a--;
}
}
}
//全部删除
$scope.delAll = function() {
$scope.arr.splice(0, $scope.arr.length);
}
$scope.jia = false;
//增加

$scope.add = function() {
//验证
$scope.error = [];
if($scope.newname == "" || $scope.newname == undefined) {
$scope.error.push("用户名不能为空")
}
if($scope.newpass == "" || $scope.newpass == undefined) {
$scope.error.push("密码不能为空")
}else if($scope.newpass.length<2){
$scope.error.push("密码长度大于2")
}
if($scope.newage == "" || $scope.newage == undefined) {
$scope.error.push("年龄不能为空")
}else if($scope.newage<10){
$scope.error.push("年龄大于10")
}
if($scope.newsex == "" || $scope.newsex == undefined) {
$scope.error.push("性别不能为空")
}
if($scope.error.length != 0) {
alert("格式有误")
} else {
$scope.a = {
id: $scope.newid,
state: false,
name: $scope.newname,
pass: $scope.newpass,
age: $scope.newage,
sex: $scope.newsex
}
$scope.arr.push($scope.a);
$scope.jia = false;
$scope.newname = "";
$scope.newpass = "";
$scope.newage = "";
$scope.newsex = ";"
}
}
//范围查询
$scope.fanwei = function(age) {
var arr = $scope.filterage;
var ageArr = arr.split("-");
if($scope.filterage == "" || $scope.filterage == undefined) {
ageArr[0] = 0;
ageArr[1] = 100;
}
if(age >= ageArr[0] && age <= ageArr[1]) {
return true;
} else {
return false;
}
}

});
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<center>
姓名查找:<input type="text" ng-model="Fname" /> 年龄查找:
<select ng-model="filterage">
<option value="">请输入年龄</option>
<option>10-12</option>
<option>13-20</option>
</select>
性别查找

<select ng-model="f1">
<option value="">请输入年龄</option>
<option>男</option>
<option>女</option>
</select>

<button ng-click="delAll()">删除全部</button>
<button ng-click="delPl()">批量删除</button><br /><br />
<table border="1" cellpadding="10" cellspacing="0">
<tr>
<th><input type="checkbox" ng-click="qx()" ng-model="quanx" /></th>
<th>序号</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr ng-repeat="a in arr | filter:{name:Fname,sex:f1}" ng-show="fanwei(a.age)">
<td><input type="checkbox" ng-model="a.state" /></td>
<td>{{a.id}}</td>
<td>{{a.name}}</td>
<td><span ng-show="!xiugai">{{a.pass}}</span><span ng-show="xiugai"><input type="text" ng-model="a.pass"/><button ng-click="xiugai=false">保存</button></span> </td>
<td>{{a.age}}</td>
<td>{{a.sex}}</td>
<td><button ng-click="xiugai=true">修改密码</button></td>
</tr>
<tr>
<td colspan="7" align="center"><button ng-click="jia=true">添加用户</button></td>
</tr>
</table>
<div ng-model="jia" ng-show="jia">
序号<input type="number" ng-model="newid" /><br /> 姓名
<input type="text" ng-model="newname" /><br /> 密码
<input type="text" ng-model="newpass" /><br /> 年龄
<input type="number" ng-model="newage" /><br /> 性别
<select ng-model="newsex"><br />
<option>男</option>
<option>女</option>
</select>
<button ng-click="add()">保存</button>
</div>
<div ng-model="error.length==0">
<ul>
<li ng-repeat="e in error">{{e}}</li>
</ul>
</div>
</center>

评论

成就一亿技术人!

拼手气红包6.0元

还能输入1000个字符

添加红包

插入表情

表情包

代码片

HTML/XML
objective-c
Ruby
PHP
C
C++
JavaScript
Python
Java
CSS
SQL
其它

条评论被折叠查看

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。