本文介绍了一个使用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-modle="filtersex1">
<option value="">请输入年龄</option>
<option>10-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>
<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-modle="filtersex1">
<option value="">请输入年龄</option>
<option>10-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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
