angularJS 增加删除修改查询排序

最新推荐文章于 2021-01-12 17:32:47 发布

彦4212

最新推荐文章于 2021-01-12 17:32:47 发布

阅读量261

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/qq_40089806/article/details/78835916

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>月考练习—修改密码</title>
<script src="js/angular.min.js"></script>

<style>

table tr:nth-child(even){
background: #ccc;
}

</style>

<script>
var myapp = angular.module("myapp", []);
myapp.controller("kongzhiqi", ["$scope", function($scope) {
$scope.users = [{
state: false,
age:12,
id: 1,
name: "曹操",
pwd: 123456,
jibie: 1,
time: new Date('2017-12-1 9:08:12')
},
{
age:21,
state: false,
id: 2,
name: "刘备",
pwd: 123456,
jibie: 1,
time: new Date('2017-10-2 9:08:12')
},
{
age:30,
state: false,
id: 3,
name: "司马懿",
pwd: 123456,
jibie: 1,
time: new Date('2017-10-3 9:08:12')
},
{
age:48,
state: false,
id: 4,
name: "孙权",
pwd: 123456,
jibie: 1,
time: new Date('2017-10-4 9:08:12')
},
{
age:53,
state: false,
id: 5,
name: "关羽",
pwd: 123456,
jibie: 2,
time: new Date('2017-12-5 9:08:12')
},
{
age:50,
state: false,
id: 6,
name: "张飞",
pwd: 123456,
jibie: 2,
time: new Date('2017-12-6 9:08:12')
},
{
age:60,
state: false,
id: 7,
name: "周瑜",
pwd: 123456,
jibie: 2,
time: new Date('2017-12-7 9:08:12')
},
{
age:45,
state: false,
id: 8,
name: "陆萧",
pwd: 123456,
jibie: 2,
time: new Date('2017-12-8 9:08:12')
},
{
age:14,
state: false,
id: 9,
name: "黄盖",
pwd: 123456,
jibie: 2,
time: new Date('2017-12-9 9:08:12')
},
{
age:35,
state: false,
id: 10,
name: "张辽",
pwd: 123456,
jibie: 3,
time: new Date('2017-12-10 9:08:12')
},
{
age:24,
state: false,
id: 11,
name: "赵云",
pwd: 123456,
jibie: 3,
time: new Date('2017-12-11 9:08:12')
},
{
age:15,
state: false,
id: 12,
name: "孙尚香",
pwd: 123456,
jibie: 4,
time: new Date('2017-12-12 9:08:12')
},
{
age:18,
state: false,
id: 13,
name: "大乔",
pwd: 123456,
jibie: 4,
time: new Date('2017-12-13 9:08:12')
},
{
age:13,
state: false,
id: 14,
name: "小乔",
pwd: 123456,
jibie: 4,
time: new Date('2017-12-18 9:08:12')
}
];

//添加
$scope.baocun = function() {
var uid = $scope.uid;
var uage = $scope.uage;
var uname = $scope.uname;
var upwd = $scope.upwd;
var ujibie = $scope.ujibie;
var utime = new Date;
$scope.users.push({
id: uid,
name: uname,
pwd: upwd,
jibie: ujibie,
age: uage,
time: utime
});
}

//全选的操作
$scope.ckAll = function() {
for(var i in $scope.users) {
$scope.users[i].state = $scope.ckall;
}
}

//批量删除
$scope.del = function() {
for(var i = 0; i < $scope.users.length; i++) {
if($scope.users[i].state) {
$scope.users.splice(i, 1);
i--; //让下个值从删除的索引开始
}
}
}

//按照年龄查找
$scope.ageSize="--请输选择--";
$scope.ageFun=function(item){
//return false;
if($scope.ageSize!="--请输选择--"){
var arr=$scope.ageSize.split("-");
var min=arr[0];
var max=arr[1];
if(item.age>max||item.age<min){
return false;
}else{
return true;
}
}else{
return true;
}
};

}]);
</script>

</head>

<body ng-app="myapp" ng-controller="kongzhiqi">

<input type="text" ng-model="ssname" onblur="lijiao()" />

<select ng-model="ssjb">
<option>--根据级别查询--</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>

<select ng-model="ageSize">
<option>--根据年龄段查询--</option>
<option>0-10</option>
<option>10-20</option>
<option>20-30</option>
<option>30-40</option>
<option>40-50</option>
<option>50-60</option>
</select>

<select style="margin-left: 265px;" ng-model="px">
<option value="+jibie">级别正序</option>
<option value="-jibie">级别倒叙</option>
<option value="+time">时间正序</option>
<option value="-time">时间倒叙</option>
</select>

<br><br>

<button style="background: green;" ng-click="toadd=true">新增用户</button>
<button style="background: orangered;" ng-click="del()">批量删除</button> 敏感词：抢劫、小偷

<br/>
<br/>

<table border="1px soild" style="width:800px;">
<tr style="background: gray;">
<th>
<input type="checkbox" ng-model="ckall" ng-click="ckAll()"/>
</th>
<td>ID</td>
<td>用户名</td>
<td>年龄</td>
<td>密码</td>
<td>级别</td>
<td>创建时间</td>
<td>操作</td>
</tr>
<tr ng-repeat="u in users | filter:{name:ssname,jibie:ssjb}|orderBy:px|filter:sexFun">
<td><input type="checkbox" ng-model="u.state" /> </td>
<td>{{u.id}}</td>
<td>{{u.name}}</td>
<td>{{u.age}}</td>
<td>
{{u.pwd}}
<input ng-model="u.pwd" ng-show="!xg"/>
<button ng-click="xg=!xg" ng-show="!xg">保存</button>
</td>
<td>{{u.jibie}}</td>
<td>{{u.time|date:'yyyy-MM-dd hh:mm:ss'}}</td>
<td>
<button ng-click="xg=!xg">修改密码</button>

</td>
</tr>
</table>

<form ng-show="toadd">
ID：<input type="text" ng-model="uid" /><br/> 用户名：
<input type="text" ng-model="uname" /><br/>
年龄：<input type="number" ng-model="uage">密码：
<input type="text" ng-model="upwd" /><br/> 级别：
<input type="text" ng-model="ujibie" /><br/> 创建时间：
<input type="text" ng-model="utime" /><br/>
<button ng-click="baocun()">保存</button>
</form>

</body>

</html>