angular

洛神之首

于 2018-02-01 15:03:41 发布

阅读量138

点赞数

本文链接：https://blog.csdn.net/qq_41699439/article/details/79228721

版权

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" /><!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="js/angular.js"></script>
<script>
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope){
$scope.prducts=[{
ck:false,
id:1,
name:"尼尔",
prass:123456,
nil:18,
sex:"女"
},{
ck:false,
id:2,
name:"雷姆",
prass:123456,
nil:19,
sex:"女"
},{
ck:false,
id:3,
name:"路飞",
prass:123456,
nil:30,
sex:"男"
},{
ck:false,
id:4,
name:"阿库娅",
prass:123456,
nil:30,
sex:"女"
}];
$scope.age="";

//全选
$scope.qx=function(){
for(var i in $scope.prducts){
$scope.prducts[i].ck=$scope.all;
}
}
//删除
$scope.shanchu=function(){
for(var i=0 ;i<$scope.prducts.length;i++){
if($scope.prducts[i].ck){
$scope.prducts.splice(i,1);
i--;
}
}
}
//全删除
$scope.del=function(){
$scope.prducts.length=0;
}
});
//隐藏添加输入框
// $scope.add = function(){
// $scope.qq = !$scope.qq;
// }
// //添加
$scope.save = function(){
var tian = {
ck:false,
id:$scope.add_id,
name:$scope.add_name,
prass:$scope.add_prass,
nil:$scope.add_age,
sex:$scope.add_sex
}
$scope.prducts.push(tian);
$scope.qq=false;

}
//过滤年龄


</script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<center>
姓名查找<input type="text" ng-model="uname" />
年龄查找<select ng-model="age">
<option value="">年龄查找</option>
<option>10~20</option>
<option>20~40</option>
<option>40~60</option>
</select>
性别查找<select ng-model="sexs">
<option value="">--请输选择</option>
<option value="男">---男---</option>
<option value="女">---女---</option>
</select>
<button ng-click="shanchu()">删除全部</button>
<button ng-click="del()">批量删除</button>
<br />
<table border="1" cellspacing="0" cellpadding="20">
<tr>
<thead>
<th>全选<input type="checkbox" ng-model="all" ng-click="qx()"/></th>
<th>选号</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</thead>
</tr>
<tbody>
<tr ng-repeat="pro in prducts|filter:{name:uname,sex:sexs}">
<td><input type="checkbox" ng-model="pro.ck" /></td>
<td>{{pro.id}}</td>
<td>{{pro.name}}</td>
<td><span ng-hide="xuigai">{{pro.prass}}</span>
<span ng-show="xuigai"><input type="text" ng-model="pro.prass" />
<button ng-click="xuigai=false">保存</button> </span>
</td>
<td>{{pro.nil}}</td>
<td>{{pro.sex}}</td>
<td><button ng-click="xuigai=true">修改密码</button></td>
</tr>
</tbody>
<button ng-click="qq = true">添加</button>

</table>
<div ng-show="qq">
<input placeholder="请输入ID" ng-model="add_id"/>
<input placeholder="请输入姓名" ng-model="add_name"/>
<input placeholder="请输入密码" ng-model="add_prass"/>
<input placeholder="请输入年龄" ng-model="add_age"/>
<input placeholder="请输入性别" ng-model="add_sex"/>
<button ng-click="save()">提交</button>
</div>
</center>
</body>
</html>
<title></title>
<script src="js/angular.js"></script>
<script>
var app=angular.module("myapp",[]);
app.controller("myctrl",function($scope){
$scope.prducts=[{
ck:false,
id:1,
name:"尼尔",
prass:123456,
nil:18,
sex:"女"
},{
ck:false,
id:2,
name:"雷姆",
prass:123456,
nil:19,
sex:"女"
},{
ck:false,
id:3,
name:"路飞",
prass:123456,
nil:30,
sex:"男"
},{
ck:false,
id:4,
name:"阿库娅",
prass:123456,
nil:30,
sex:"女"
}];
$scope.age="";

//全选
$scope.qx=function(){
for(var i in $scope.prducts){
$scope.prducts[i].ck=$scope.all;
}
}
//删除
$scope.shanchu=function(){
for(var i=0 ;i<$scope.prducts.length;i++){
if($scope.prducts[i].ck){
$scope.prducts.splice(i,1);
i--;
}
}
}
//全删除
$scope.del=function(){
$scope.prducts.length=0;
}
});
//隐藏添加输入框
// $scope.add = function(){
// $scope.qq = !$scope.qq;
// }
// //添加
$scope.save = function(){
var tian = {
ck:false,
id:$scope.add_id,
name:$scope.add_name,
prass:$scope.add_prass,
nil:$scope.add_age,
sex:$scope.add_sex
}
$scope.prducts.push(tian);
$scope.qq=false;

}
//过滤年龄


</script>
</head>
<body ng-app="myapp" ng-controller="myctrl">
<center>
姓名查找<input type="text" ng-model="uname" />
年龄查找<select ng-model="age">
<option value="">年龄查找</option>
<option>10~20</option>
<option>20~40</option>
<option>40~60</option>
</select>
性别查找<select ng-model="sexs">
<option value="">--请输选择</option>
<option value="男">---男---</option>
<option value="女">---女---</option>
</select>
<button ng-click="shanchu()">删除全部</button>
<button ng-click="del()">批量删除</button>
<br />
<table border="1" cellspacing="0" cellpadding="20">
<tr>
<thead>
<th>全选<input type="checkbox" ng-model="all" ng-click="qx()"/></th>
<th>选号</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</thead>
</tr>
<tbody>
<tr ng-repeat="pro in prducts|filter:{name:uname,sex:sexs}">
<td><input type="checkbox" ng-model="pro.ck" /></td>
<td>{{pro.id}}</td>
<td>{{pro.name}}</td>
<td><span ng-hide="xuigai">{{pro.prass}}</span>
<span ng-show="xuigai"><input type="text" ng-model="pro.prass" />
<button ng-click="xuigai=false">保存</button> </span>
</td>
<td>{{pro.nil}}</td>
<td>{{pro.sex}}</td>
<td><button ng-click="xuigai=true">修改密码</button></td>
</tr>
</tbody>
<button ng-click="qq = true">添加</button>

</table>
<div ng-show="qq">
<input placeholder="请输入ID" ng-model="add_id"/>
<input placeholder="请输入姓名" ng-model="add_name"/>
<input placeholder="请输入密码" ng-model="add_prass"/>
<input placeholder="请输入年龄" ng-model="add_age"/>
<input placeholder="请输入性别" ng-model="add_sex"/>
<button ng-click="save()">提交</button>
</div>
</center>
</body>
</html>