增，删，改，模糊查询下拉查询验证

最新推荐文章于 2023-03-30 16:43:18 发布

「已注销」

最新推荐文章于 2023-03-30 16:43:18 发布

阅读量221

点赞数

本文链接：https://blog.csdn.net/fuckyouarefuck/article/details/79083531

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>月考联系</title>
<script src="js/angular.min.js"></script>
<script src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
angular.module("ass",[]).controller("dom",function($scope){
$scope.stus = [{
sk:false,
id: 1,
name: '李1',
pwd: 123456,
age:18,
sex:'女'
}, {
sk:false,
id: 2,
name: '李2',
pwd: 123456,
age:28,
sex:'男'
}, {
sk:false,
id: 3,
name: '李3',
pwd: 123456,
age:38,
sex:'男'
}];
//全部删除
$scope.delall=function(){
for (var i = 0; i < $scope.stus.length; i++) {
$scope.stus.splice(i,1);
i--;
}
}
//批量删除
$scope.delall2=function(){
var conn=0;
for (var i = 0; i < $scope.stus.length; i++) {
if($scope.stus[i].sk){
conn=conn+1;
$scope.stus.splice(i,1);
i--;
}
}
if(conn==0){
alert("请选择");
}
}
//全选
$scope.ckk=function(){
for (var i = 0; i < $scope.stus.length; i++) {
$scope.stus[i].sk=$scope.flag;
}
}
$scope.fs=false;
$scope.fff=false;
$scope.ffff=false;
//添加
$scope.add=function(){
$scope.checkSub=[];
var X_name=$scope.nname;
var X_pwd=$scope.npwd;
var X_age=$scope.nage;
var X_sex=$scope.nsex;
var newstu={sk:false,id:$scope.stus.length+1,name: X_name,pwd:X_pwd,age:X_age,sex:X_sex};
if(X_name == "" || X_name == null) {
$scope.checkSub.push("名字为空");
}
if( X_pwd== "" || X_pwd == null) {
$scope.checkSub.push("密码为空");
}
if(X_age == "" || X_age == null) {
$scope.checkSub.push("年龄格为空");
} else if(isNaN(X_age)) {
$scope.checkSub.push("年龄不是数子");
}
if( X_sex== "" || X_sex == null) {
$scope.checkSub.push("性别为空");
}

if($scope.checkSub.length > 0) {
$scope.ffff=true;
$scope.fff=true;
} else {
$scope.fff=false;
$scope.ffff=false;
$scope.stus.push(newstu);
}
}
$scope.productPrice = "--请选择--";
//年龄查找
$scope.dd=function(p){
var prica_b= $scope.newage;//10-20
if(prica_b==undefined||prica_b==""){
return true;
}
var v_age=prica_b.split("-");
var min=v_age[0];
var max=v_age[1];
if(p>=min && p<=max) {
return true;
} else {
return false;
}

}
})
</script>
<style>
*{
margin: 0 auto;
}
#zong{
width: 800px;
}
#aa table tr:nth-child(odd){
background: #CCCCCA;
}
#aa table tr:nth-child(1){
background: #777775;
}
#aaa {
width: 300px;
}

</style>
</head>
<body ng-app="ass" ng-controller="dom">
<div id="zong">
<div id="a">
姓名查找<input type="text" ng-model="newname" />
年龄查找<select ng-model="newage">
<option value="">{{productPrice}}</option>
<option value="10-20">10-20</option>
<option value="20-30">20-30</option>
<option value="30-40">30-40</option>
</select>
性别查找
<select ng-model="newsex" >
<option value="">{{productPrice}}</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
<button ng-click="delall()">删除全部</button>
<button ng-click="delall2()">批量删除</button>
<button ng-click="fff=true">添加用户</button>
</div>
<div id="aa">
<table border="1" cellspacing="0" cellpadding="1" width="800px">
<tr>
<th>全选<input type="checkbox" ng-model="flag" ng-click="ckk()"/></th>
<th>序号</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr ng-show="dd(s.age)" ng-click="yue(s.age)" ng-repeat="s in stus|filter:{name:newname}|filter:{sex:newsex}">
<td><input type="checkbox" ng-model="s.sk" /></td>
<td>{{$index}}</td>
<td>{{ s.name}}</td>
<td>{{ s.pwd }}
<span ng-show="fs">
<input type="text" width="30px" ng-model="s.pwd" />
<button ng-click="fs=false">保存</button>
</span>
</td>
<td>{{ s.age }}</td>
<td>{{ s.sex}}</td>
<td><button ng-click="fs=true">修改密码</button></td>
</tr>
</table>
</div>
<div id="aaa" ng-show="fff">

<table border="1" cellspacing="0" cellpadding="1">
<tr>
<td>姓名</td>
<td><input type="text" ng-model="nname"/></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" ng-model="npwd"/></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" ng-model="nage"/></td>
</tr>
<tr>
<td>性别</td>
<td>男 <input type="radio" value="男" name="ss" ng-model="nsex"/>    女<input type="radio" value="女" name="ss" ng-model="nsex"/></td>
</tr>
<tr>
<td colspan="2" align="center"><button ng-click="add()">提交</button></td>
</tr>
</table>
<div style="border: 1px solid blue; border: 1px solid #f00;width: 250px;" ng-show="ffff">
<ul>
<li ng-repeat="chenk in checkSub">{{chenk}}</li>
</ul>
</div>
</div>
</div>
</body>
</html>

「已注销」

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
增，删，改，模糊查询下拉查询验证

月考联系angular.module("ass",[]).controller("dom",function($scope){$scope.stus = [{sk:false,id: 1,name: '李1',pwd: 123456,age:18,sex:'女'}, {sk:false,id: 2,name: '李2',pwd: 12
复制链接

扫一扫