您的位置：首页 > Web前端 > AngularJS

angularJS实现增删改查等

2017-10-22 19:19 477 查看 
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>weicy</title>
<script src="angular.js"></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function ($scope) {
$scope.arr=[];
$scope.users = [{
id:1,
name:"张三",
pwd:"123",
age:22,
sex:"男",
state:false
},{
id:2,
name:"李四",
pwd:"456",
age:33,
sex:"女",
state:false
},{
id:3,
name:"王五",
pwd:"789",
age:44,
sex:"男",
state:false
}];
//批量删除
$scope.deleteSel = function(){

for(var i=0;i<$scope.users.length;i++){
if($scope.users[i].state==true){
$scope.users.splice(i,1);
i--;
}
}
}

//全选方法
$scope.selectAll=false;
$scope.selectAllFun= function () {
for(var i=0;i<$scope.users.length;i++){
if($scope.selectAll===true){
$scope.users[i].state=true;
}else {
$scope.users[i].state=false;
}
}
};
//如果选项全部现在 全选按键自动为true
$scope.checkSelect = function () {
var flag = 0;
for(var i = 0; i<$scope.users.length; i++){
if($scope.users[i].state == true){
flag ++;
}
}
if(flag == $scope.users.length){
$scope.selectAll = true;
}else{
$scope.selectAll = false;
}
};
//性别区间选择
$scope.size = "--请选择--";
$scope.ageSize = function(age,size){

if(size == "--请选择--"){
return true;
}else{
var arr = size.split("-");
var ageMin = arr[0];
var ageMax = arr[1];
if(age>ageMin && age<ageMax){
return true;
}else{
return false;
}
}
}
//男女区间选择
$scope.size1 = "--请选择--";
$scope.sexSize = function(sex,size1){

if(size1 == "--请选择--"){
return true;
}else{

if($scope.size1==sex){
return true;
}else{
return false;
}
}
}
//全部删除
$scope.deleteAll = function(){
$scope.users = null;
}
//添加用户显示隐藏
$scope.toggle = function() {
$scope.myVar = !$scope.myVar;
}
//修改密码显示隐藏
$scope.xgmm = function($index,name,pwd) {
$scope.myVar1 = !$scope.myVar1;
$scope.name = name;
$scope.tijiao = function (xgjmm,xgxmm,xgqr) {
if (pwd!=xgjmm){
alert("旧密码不正确")
}else {
if (xgxmm != xgqr){
alert("两次密码不一致")
}else {
for(index in $scope.users){
if($scope.users[index].name == name){
//获得用户输入的密码，赋值给当前用户要修改的新密码。

$scope.users[index].pwd = xgxmm;
}
}
}

}
}

}
//添加用户
$scope.zhuce = function (id,yhm,mm,nl,xb) {
if (id==""||id==null && yhm==""||yhm==null && mm==""||mm==null && nl==""||nl==null && xb==""||xb==null){
alert("不能为空")
}else {
if (nl>10 && nl<60){
$scope.users.push({
id:id,
name:yhm,
pwd:mm,
age:nl,
sex:xb,
state:false
});
}else {
alert("年龄在10到60之间")
}

}

}

})
</script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<center>
<input type="text" placeholder="用户名查询" ng-model="yhm"> 
年龄：<select  ng-model="size">
<option>--请选择--</option>
<option>11-20</option>
<option>21-30</option>
<option>31-40</option>
<option>41-50</option>
<option>51-60</option>
</select> 
性别：<select ng-model="size1">
<option>--请选择--</option>
<option>男</option>
<option>女</option>

</select> 
<button ng-click="deleteAll()">全部删除</button> <button  ng-click="deleteSel()">批量删除</button>
<br><br>
<table border="1 solid blue" cellpadding="10" cellspacing="0">
<tr>
<th><input type="checkbox"  ng-model="selectAll" ng-click="selectAllFun()"></th>
<th>i   d</th>
<th>用户名</th>
<th>密  码</th>
<th>年  龄</th>
<th>性  别</th>
<th>操  作</th>
</tr>
<tr ng-repeat="user in users | filter:{name:yhm}  " ng-if="ageSize(user.age,size)" ng-show="sexSize(user.sex,size1)">
<td><input type="checkbox"  ng-model="user.state"  ng-click="checkSelect($index)" /></td>
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.pwd}}</td>
<td>{{user.age}}</td>
<td>{{user.sex}}</td>
<td><button  ng-click="xgmm($index,user.name,user.pwd)">修改密码</button></td>
</tr>

</table>
<br><br>

<button ng-click="toggle()">添加用户</button>
<table ng-if="myVar"  border="1 solid blue" cellpadding="10" cellspacing="0">
<tr>
<th>i   d</th>
<td><input type="text" ng-model="id"></td>
</tr>
<tr>
<th>用户名</th>
<td><input type="text" ng-model="yhm"></td>
</tr>
<tr>
<th>密  码</th>
<td><input type="password" ng-model="mm"></td>
</tr>
<tr>
<th>年  龄</th>
<td><input type="text" ng-model="nl"></td>
</tr>
<tr>
<th>性  别</th>
<td><input type="text" ng-model="xb"></td>
</tr>
<tr  align="center">

<td colspan="2" ><button ng-click="zhuce(id,yhm,mm,nl,xb)">注册</button></td>
</tr>

</table>
<br><br>

<table ng-if="myVar1"  border="1 solid blue" cellpadding="10" cellspacing="0">
<tr>
<th>用户名</th>
<td><input type="text" disabled="disabled" ng-model="name" placeholder="请输入用户名"></td>
</tr>
<tr>
<th>旧密码</th>
<td><input type="text" ng-model="xgjmm"></td>
</tr>
<tr>
<th>新密码</th>
<td><input type="password" ng-model="xgxmm"></td>
</tr>
<tr>
<th>确认</th>
<td><input type="password" ng-model="xgqr"></td>
</tr>

<tr  align="center">

<td colspan="2" ><button ng-click="tijiao(xgjmm,xgxmm,xgqr)">提交</button></td>
</tr>

</table>

</center>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航