重要2

最新推荐文章于 2021-07-25 16:32:02 发布

twtxby

最新推荐文章于 2021-07-25 16:32:02 发布

阅读量117

点赞数

本文链接：https://blog.csdn.net/xiaozi_01anfen/article/details/79102672

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title></title>
<style>
span {
color: red;
}
</style>
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.11.1.js"></script>
<script>
angular.module("rxy", []).controller("democ", function($scope) {
$scope.add_div = false;
$scope.mess = [{
name: "张振洋",
pass: 123,
age: 23,
sex: "男"
}, {
name: "李洋洋",
pass: 456,
age: 32,
sex: "女"
}];
$scope.ages = function(a) {
if($scope.aa == undefined || $scope.aa == "") {
return true;
} else if(a > $scope.aa.split("-")[0] && a <= $scope.aa.split("-")[1]) {
return true;
}
return false;
}
$scope.ckAll = function() {
for(i in $scope.mess) {
$scope.mess[i].ck = $scope.flag;
}
}
$scope.delAll = function() {
for(i in $scope.mess) {
$scope.mess.splice(i);
}
}
$scope.del = function() {
for(var i = 0; i < $scope.mess.length; i++) {
if($scope.mess[i].ck) {
$scope.mess.splice(i, 1);
i--;
}
}
}
$scope.add = function() {
$scope.add_div = true;
}
$scope.sub = function() {
var flags = false;
if($scope.n == "" || $scope.n == null) {
$("#name").text("姓名不能为空");
flags = false;
} else{
$("#name").text("");
flags = true;
}
if($scope.p == "" || $scope.p == null) {
$("#pass").text("密码不能为空");
flags = false;
} else{
$("#pass").text("");
flags = true;
}
if($scope.a == "" || $scope.a == null) {
$("#age").text("年龄不能为空");
flags = false;
} else {
$("#age").text("");
flags = true;
}
if(flags == true) {
var mm = {
name: $scope.n,
pass: $scope.p,
age: $scope.a,
sex: $scope.s
}
$scope.mess.push(mm);
}
}
});
</script>
</head>

<body ng-app="rxy" ng-controller="democ">
姓名查找<input ng-model="nn" />年龄查找
<select ng-model="aa">
<option value="">--请输选择--</option>
<option>10-20</option>
<option>20-30</option>
<option>30-40</option>
</select>性别查找：
<select ng-model="ss">
<option value="">--请输选择--</option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="delAll()">删除全部</button><button ng-click="del()">批量删除</button><br /><br />
<table border="1px solid" style="border-collapse: collapse; text-align: center;" width="700px">
<tr>
<th>全选<input type="checkbox" ng-click="ckAll()" ng-model="flag" /></th>
<th>序号</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr ng-repeat="i in mess|filter:{name:nn}|filter:{sex:ss}" ng-show="ages(i.age)">
<td><input type="checkbox" ng-model="i.ck" /></td>
<td>{{$index}}</td>
<td>{{i.name}}<input ng-show="f" style="width: 40px;" ng-model="i.name" /></td>
<td>{{i.pass}}<input ng-show="f" style="width: 40px;" ng-model="i.pass" /></td>
<td>{{i.age}}<input ng-show="f" style="width: 40px;" ng-model="i.age" /></td>
<td>{{i.sex}}<input ng-show="f" style="width: 40px;" ng-model="i.sex" /><button ng-show="f" ng-click="f=false">保存</button></td>
<td><button ng-click="f=true">修改密码</button></td>
</tr>
</table>
<button ng-click="add()">添加用户</button>
<div ng-show="add_div">
<table border="1" style="border-collapse: collapse;text-align: center;">
<tr>
<td>姓名</td>
<td><input placeholder="请输入姓名" ng-model="n" /><span id="name"></span></td>
</tr>
<tr>
<td>密码</td>
<td><input placeholder="请输入密码" ng-model="p" /><span id="pass"></span></td>
</tr>
<tr>
<td>年龄</td>
<td><input placeholder="请输入年龄" ng-model="a" /><span id="age"></span></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" name="sexs" value="男" ng-model="s" checked="checked"/>男<input type="radio" name="sexs" value="女" ng-model="s" />女</td>
</tr>
<tr>
<td colspan="2"><button ng-click="sub()">提交</button></td>
</tr>
</table>
</div>
</body>

</html>