内容
<body ng-app="myApp" ng-controller="myCatry">
姓名查找<input type="text" ng-model="sname" />
年龄查找<select ng-model="sage">
<option value="">请输入</option>
<option>10-20</option>
<option>20-30</option>
</select>
性别查找<select ng-model="ssex">
<option value="">请输入</option>
<option value="男">男</option>
<option value="女">女</option>
</select>
<button ng-click="delect()">删除全部</button>
<button ng-click="pldelect()">批量删除</button>
<table border="1px">
<thead>
<tr>
<th>全选<input type="checkbox" ng-model="all1" ng-click="all()"></th>
<th>序号</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="pro in add | filter:{name:sname,pass:spass,age:sage,sex:ssex}" ng-show="test(pro.age)">
<td><input type="checkbox" ng-model="pro.ck"></td>
<td>{{pro.id}}</td>
<td>{{pro.name}}</td>
<td>{{pro.pass}} <input type="text" ng-show="f1" ng-model="por.pass"><input type="button" value="保存" ng-show="f1" ng-click="f1=false"></td>
<td>{{pro.age}}</td>
<td>{{pro.sex}}</td>
<td><button ng-click="f1=true">修改密码</button><button ng-click="delat(pro.id)">删除</button></td>
</tr>
</tbody>
</table>
<button ng-click="f2=true">添加用户</button>
<table border="1px" ng-show="f2" id="container">
<tr>
<td>姓名</td>
<td><input type="text" ng-model="add_name" placeholder="请输入姓名"></td>
</tr>
<tr>
<td>密码</td>
<td><input type="text" ng-model="add_pass" placeholder="请输入密码"></td>
</tr>
<tr>
<td>年龄</td>
<td><input type="text" ng-model="add_age" placeholder="请输入年龄"></td>
</tr>
<tr>
<td>性别</td>
<td><input type="radio" ng-model="add_sex" value="男" name=sex>男<input type="radio" ng-model="add_sex" value="女" name=sex>女</td>
</tr>
<tr>
<td colspan="2" align="center"><button ng-click="save()">提交</button></td>
</tr>
</table>
</body>
----------------------------------------------------------------------------------------------------------------------------------
样式
<script>
var app = angular.module("myApp",[]);
app.controller("myCatry",function($scope){
$scope.add = [{
ck: false,
id:1,
name:"小明",
pass:"xiaom",
age:10,
sex:"男"
},{
ck: false,
id:2,
name:"小红",
pass:"xiaoh",
age:21,
sex:"女"
},{
ck: false,
id:3,
name:"小刚",
pass:"xiaog",
age:30,
sex:"男"
},{
ck: false,
id:4,
name:"小高",
pass:"xiaogao",
age:20,
sex:"男"
}];
$scope.save = function(){
var g1 = {
ck:false,
id:$scope.add.length + 1,
name:$scope.add_name,
pass:$scope.add_pass,
age:$scope.add_age,
sex:$scope.add_sex,
};
$scope.add.push(g1);
$scope.f2=false;
}
$scope.all = function(){
for (var i = 0; i < $scope.add.length; i++) {
$scope.add[i].ck=$scope.all1;
}
}
$scope.delat = function(clumn){
for (index in $scope.add) {
if($scope.add[index].id==clumn){
$scope.add.splice(index,1);
}
}
}
$scope.pldelect = function(){
for (var i = 0 ; i < $scope.add.length; i++) {
if($scope.add[i].ck){
$scope.add.splice(i,1);
i--;
}
}
}
$scope.delect = function(){
$scope.add.length = 0;
}
$scope.test=function(z){
var age = $scope.sage;
var a = age.split("-");
if(age=="" || age==undefined){
return true;
}
var min = a[0];
var max = a[1];
if(z>=min && z<=max){
return true;
}else{
return false;
}
}
});
</script>
200
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
