angularjs 增删改查 年龄查询

<!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>


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值