angularjs简单使用批量删除

来源：互联网发布：服装成本统计软件编辑：程序博客网时间：2024/06/11 03:32

<!DOCTYPE html>
<html ng-app="zhangapp" ng-controller="demoC">
<head>
<meta charset="UTF-8">
<title>新的</title>
<script src="js/angular.min.js"></script>
<script>
angular.module("zhangapp",[])
.controller("demoC",function($scope){
$scope.users=[{
state:false,
id:1,
name:"曹操",
age:5,
pass:123456,
rank:1,
data:new Date("2017-10-01 10:00:00")
},{
state:false,
id:3,
name:"刘备",
age:8,
pass:123456,
rank:1,
data:new Date("2017-10-03 10:00:00")
},{
id:4,
name:"司马懿",
age:3,
state:false,
pass:123456,
rank:1,
data:new Date("2017-10-04 10:00:00")
},{
id:2,
name:"孙权",age:25,
pass:123456,

state:false,
rank:1,
data:new Date("2017-10-02 10:00:00")
},{
id:6,
name:"关羽",
age:35,
state:false,
pass:123456,
rank:2,
data:new Date("2017-10-06 10:00:00")
},{
id:7,
state:false,
name:"张飞",
age:45,
pass:123456,
rank:2,
data:new Date("2017-10-07 10:00:00")
},{
id:11,
state:false,
name:"周瑜",age:55,

pass:123456,
rank:2,
data:new Date("2017-10-11 10:00:00")
},{
id:12,
state:false,
name:"鲁肃",
age:25,
pass:123456,
rank:2,
data:new Date("2017-10-12 10:00:00")
},{
id:13,
name:"黄盖",
age:15,
state:false,
pass:123456,
rank:3,
data:new Date("2017-10-13 10:00:00")
},{
id:5,
name:"张辽",
age:32,
state:false,
pass:123456,
rank:3,
data:new Date("2017-10-05 10:00:00")
},{
id:8,
name:"赵云",
age:18,
state:false,
pass:123456,
rank:3,
data:new Date("2017-10-08 10:00:00")
},{
id:9,
name:"孙尚香",
age:42,
pass:123456,
state:false,
rank:4,
data:new Date("2017-10-09 10:00:00")
},{
id:14,
name:"大乔",
age:13,
state:false,
pass:123456,
rank:4,
data:new Date("2017-10-14 10:00:00")
},{
id:15,
name:"小乔",
age:12,
pass:123456,
state:false,
rank:4,
data:new Date("2017-10-15 10:00:00")
}];

//添加
$scope.add=function(){
var uid=$scope.uid;
var uname=$scope.uname;
var uage=$scope.uage;
var upass=$scope.upass;
var urank=$scope.urank;
var udata=$scope.udata;
$scope.users.push({id:uid,name:uname,age:uage,pass:upass,rank:urank,data:udata});
$scope.flag=false;
}

//批量删除
$scope.del=function(){

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

//全选
$scope.ckAll=function(){

for (var i in $scope.users) {
$scope.users[i].state=$scope.ckall;
}
}

//查询
$scope.sel=function(){

if ($scope.sname.indexOf("小偷")!=-1||$scope.sname.indexOf("抢劫")!=-1) {
alert("有敏感词");
return;
}else{
$scope.selname=$scope.sname;
}
}

//年龄
$scope.ishow=function(age){
var r_age=$scope.selage;
if(r_age==undefined||r_age==""){
return true;
}

//通过字符串的拆分方法
var arr_age=r_age.split("-");
if (age>=arr_age[0]&&age<=arr_age[1]) {
return true;
} else{
return false;
}
}
})
</script>
<style>
tr:nth-child(2n){
background-color: darkgray;
}
</style>
</head>
<body style="width: 630px;">
<input ng-model="sname" placeholder="查找姓名..."/>
<select ng-model="selrank" style="width: 55px;">
<option value="" selected="selected">级别</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
<select ng-model="selage">
<option value="" selected="selected">年龄</option>
<option value="1-10">1-10</option>
<option value="11-20">11-20</option>
<option value="21-30">21-30</option>
<option value="31-40">31-40</option>
<option value="41-50">41-50</option>
<option value="51-60">51-60</option>
</select>
<select ng-model="stro" style="margin-left: 230px;">
<option value="" selected="selected">按时间排序</option>
<option value="+data">按时间正序</option>
<option value="-data">按时间逆序</option>
</select><br />
<input type="button" value="新增用户" ng-click="flag=true"/>
<input type="button" value="批量删除" ng-click="del()"/>
<input type="button" value="查询" ng-click="sel()" />
敏感词:抢劫,小偷
<table border="1" cellspacing="0" style="width: 630px;">
<tr align="center" style="background-color: darkslategrey;">
<td><input type="checkbox" ng-model="ckall" ng-click="ckAll()"/></td>
<td>ID</td>
<td>用户名</td>
<td>年龄</td>
<td>密码</td>
<td>级别</td>
<td>创建时间</td>
<td>操作</td>
</tr>
<tr ng-repeat="u in users|filter:{name:selname,rank:selrank}|orderBy:stro" ng-show="ishow(u.age)">
<td><input type="checkbox" ng-model="u.state"/></td>
<td>{{u.id}}</td>
<td>{{u.name}}</td>
<td>{{u.age}}</td>
<td>
{{u.pass}}
<input ng-model="u.pass" ng-show="ff"/>
<input type="button" value="保存" ng-show="ff" ng-click="ff=false"/>
</td>
<td>{{u.rank}}</td>
<td>{{u.data|date:"yyyy-MM-dd hh:mm:ss"}}</td>
<td><input type="button" value="修改密码" ng-click="ff=true"/></td>
</tr>
</table>
<form ng-show="flag" style="width: 360px;text-align: right;margin-top: 50px;background-color: aqua;">
ID<input type="text" ng-model="uid"/><br />
用户名<input type="text" ng-model="uname"/><br />
年龄<input type="text" ng-model="uage" /><br />
密码<input type="text" ng-model="upass"/><br />
级别<input type="text" ng-model="urank"/><br />
创建时间<input type="text" ng-model="udata"/><br />
<input type="button" value="保存" ng-click="add()" style="margin-right: 50px;"/>
</form>
</body>
</html>

阅读全文

0 0