angularjs 增删改查年龄查询

最新推荐文章于 2020-08-13 15:57:23 发布

chy521xin

最新推荐文章于 2020-08-13 15:57:23 发布

阅读量227

点赞数

本文链接：https://blog.csdn.net/chy521xin/article/details/79074780

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
tbody tr:nth-child(even){
background-color: pink;
}
tbody tr:nth-child(odd){
background-color: yellow;
}
</style>
<script type="text/javascript" src="js/angularjs/angular.js" ></script>
<script>
var app = angular.module("myApp",[]);
app.controller("myCtrl",function($scope){
$scope.shangpin=[{
name:"张三",
pwd:123,
age:20,
sex:"男",
check:false
},{
name:"李四",
pwd:1234,
age:21,
sex:"女",
check:false
},{
name:"王五",
pwd:12345,
age:18,
sex:"男",
check:false
}]
//正选反选
$scope.check = function(){
for(i in $scope.shangpin){
$scope.shangpin[i].check=$scope.checkall;
}
}
//批量删除
$scope.delete = function(){
if(confirm("确认删除么？")){
for (var i = 0; i < $scope.shangpin.length; i++) {
if($scope.shangpin[i].check==true){
$scope.shangpin.splice(i,1);
i--;
}
}
}
}
//全部删除
$scope.shan = function(){
if(confirm("确认删除么？")){
$scope.shangpin=[];
}
}
$scope.add = function(){
$scope.isshow = !$scope.isshow;
}
$scope.even = function(){
var s = {
name:$scope.add_name,
pwd:$scope.add_pwd,
age:$scope.add_age,
sex:$scope.add_sex
}
if($scope.add_name==""||$scope.add_name==null&&$scope.add_pwd==""||$scope.add_pwd==null&&$scope.add_age==""||$scope.add_age==null&&$scope.add_sex==""||$scope.add_sex==null){
alert("不能为空");
}else{
$scope.shangpin.push(s);
$scope.add_name="";
$scope.add_pwd="";
$scope.add_age="";
$scope.add_sex="";
$scope.isshow=false;
}

}
$scope.ages = function(age, ageSize) {
if(ageSize != "--请选择--") {
var agess = ageSize.split("-");
var ageMin = agess[0];
var ageMax = agess[1];
if(age < ageMin || age > ageMax) {
return false;
} else {
return true;
}
} else {
return true;
}
}
})
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
姓名查找<input type="text" placeholder="姓名搜索" ng-model="search" />
年龄查找 <select ng-model="ageSize" ng-init="ageSize='--请选择--'">
<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="xb">
<option value="">--请选择--</option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="shan()">删除全部</button>
<button ng-click="delete()">批量删除</button>
<table border="1" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th><input type="checkbox" ng-model="checkall" ng-click="check()" /></th>
<th>序号</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="pro in shangpin | filter:{name:search,sex:xb}" ng-if="ages(pro.age,ageSize)">
<td><input type="checkbox" ng-model="pro.check" ng-click="check1()" /></td>
<td>{{$index}}</td>
<td>{{pro.name}}</td>
<td><span ng-hide="updateshow">{{pro.pwd}}</span><span ng-show="updateshow"><input type="text" ng-model="pro.pwd" /><button ng-click="updateshow=false">保存</button></span></td>
<td>{{pro.age}}</td>
<td>{{pro.sex}}</td>
<td><button ng-click="updateshow=true">修改密码</button></td>
</tr>
</tbody>
</table>
<button ng-click="add()">添加用户</button>
<div ng-show="isshow">
<input type="text" placeholder="请输入姓名" ng-model="add_name" /><br />
<input type="text" placeholder="请输入密码" ng-model="add_pwd" /><br />
<input type="text" placeholder="请输入年龄" ng-model="add_age" /><br />
<select ng-model="add_sex">
<option value="">请选择</option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="even()">提交</button>
</div>
</center>
</body>
</html>