<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
label {
display: block;
}
#a span {
color: red;
}
</style>
<script src="js/angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.user = [{
id: 1,
uname: "张三",
pwd: 123,
age: 18,
sex: "男",
state: false
}, {
id: 2,
uname: "李四",
pwd: 456,
age: 19,
sex: "女",
state: false
}, {
id: 3,
uname: "王五",
pwd: 789,
age: 22,
sex: "男",
state: false
}, {
id: 4,
uname: "赵六",
pwd: 147,
age: 39,
sex: "女",
state: false
}];
$scope.searchName = "";
$scope.searchSex = "";
//全选、全不选
$scope.checkAll = false;
$scope.checkAllFun = function() {
if($scope.checkAll) {
for(index in $scope.user) {
$scope.user[index].state = true;
}
} else {
for(index in $scope.user) {
$scope.user[index].state = false;
}
}
};
//批量删除
$scope.plDelete = function() {
var arr = [];
for(index in $scope.user) {
if($scope.user[index].state) {
arr.push($scope.user[index]);
}
}
if(confirm("您确定要删除吗?")) {
for(index1 in arr) {
for(index2 in $scope.user) {
if(arr[index1] == $scope.user[index2]) {
$scope.user.splice(index2, 1);
$scope.checkAll = false;
}
}
}
}
}
//过滤年龄
$scope.test = function(x) {
var age = $scope.searchAge;
var a = age.split("-");
if(age == "" || age == undefined) {
return true;
}
var min = a[0];
var max = a[1];
if(x >= min && x <= max) {
return true;
} else {
return false;
}
};
//删除全部
$scope.shan = function() {
$scope.user = "";
};
//按照年龄高低排序
$scope.checkOrder = "";
$scope.changeOrder = function() {
if($scope.checkOrder == "") {
} else if($scope.checkOrder == "age") {
$scope.orderFlag = "";
$scope.orderClumn = "age";
} else {
$scope.orderFlag = "-";
$scope.orderClumn = "age";
}
};
//添加用户
$scope.add_sex = "男"; //默认性别选择男
$scope.add = function() {
if($scope.add_id == "" || $scope.add_id == null || $scope.add_id == undefined) {
$scope.ishow = true;
return false;
} else {
$scope.ishow = false;
}
if($scope.add_uname == "" || $scope.add_uname == null || $scope.add_uname == undefined) {
$scope.ushow = true;
return false;
} else {
$scope.ushow = false;
}
if($scope.add_pwd == "" || $scope.add_pwd == null || $scope.add_pwd == undefined) {
$scope.pshow = true;
return false;
} else {
$scope.pshow = false;
}
if($scope.add_age == "" || $scope.add_age == null || $scope.add_age == undefined) {
$scope.agshow = true;
return false;
} else {
$scope.agshow = false;
}
if($scope.add_sex == "" || $scope.add_sex == null || $scope.add_sex == undefined) {
$scope.seshow = true;
return false;
} else {
$scope.seshow = false;
}
s = {
id: $scope.add_id,
uname: $scope.add_uname,
pwd: $scope.add_pwd,
age: $scope.add_age,
sex: $scope.add_sex,
state: false
};
$scope.user.push(s);
$scope.isShow = false;
};
})
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>主界面</h3> 姓名查找:
<input type="text" placeholder="姓名搜索" ng-model="searchName" />
<select ng-model="searchAge">
<option value="">---请选择年龄---</option>
<option>10-20</option>
<option>20-30</option>
<option>30-40</option>
</select>
<select ng-model="searchSex">
<option value="">---请选择性别---</option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="shan()">删除全部</button>
<button ng-click="plDelete()">批量删除</button><br /><br />
<select ng-model="checkOrder" ng-change="changeOrder()">
<option value="">---请选择---</option>
<option value="age">按年龄从高到低</option>
<option value="-age">按年龄从低到高</option>
</select>
<button ng-click="isShow = true">添加用户</button>
<br /><br />
<table border="1px" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th>全选:<input type="checkbox" ng-model="checkAll" ng-click="checkAllFun()" /></th>
<th>序号</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody align="center">
<tr ng-repeat="u in user | filter:{uname:searchName} | filter:{sex:searchSex} | orderBy:(orderFlag+orderClumn)" ng-show="test(u.age)">
<td><input type="checkbox" ng-model="u.state" /></td>
<td>{{u.id}}</td>
<td>{{u.uname}}</td>
<td><span ng-hide="xsinput">{{u.pwd}}</span><span ng-show="xsinput"><input type="text" ng-model="u.pwd"/><button ng-click="xsinput = false">保存</button></span></td>
<td>{{u.age}}</td>
<td>{{u.sex}}</td>
<td><button ng-click="xsinput = true">修改密码</button></td>
</tr>
</tbody>
</table><br />
<div ng-show="isShow" id="a">
<label>
<input type="text" placeholder="请输入序号" ng-model="add_id"/><span ng-show="ishow">id不能为空</span>
</label>
<label>
<input type="text" placeholder="请输入用户名" ng-model="add_uname"/><span ng-show="ushow">姓名不能为空</span>
</label>
<label>
<input type="password" placeholder="请输入密码" ng-model="add_pwd"/><span ng-show="pshow">密码不能为空</span>
</label>
<label>
<input type="number" placeholder="请输入年龄" ng-model="add_age"/><span ng-show="agshow">年龄不能为空</span>
</label>
<label>
<input type="radio" ng-model="add_sex" value="男"/>男
<input type="radio" ng-model="add_sex" value="女"/>女
<span ng-show="seshow">性别必选</span>
</label>
<label>
<button ng-click="add()">提交</button>
</label>
</div>
</center>
</body>
</html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
label {
display: block;
}
#a span {
color: red;
}
</style>
<script src="js/angular.js"></script>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.user = [{
id: 1,
uname: "张三",
pwd: 123,
age: 18,
sex: "男",
state: false
}, {
id: 2,
uname: "李四",
pwd: 456,
age: 19,
sex: "女",
state: false
}, {
id: 3,
uname: "王五",
pwd: 789,
age: 22,
sex: "男",
state: false
}, {
id: 4,
uname: "赵六",
pwd: 147,
age: 39,
sex: "女",
state: false
}];
$scope.searchName = "";
$scope.searchSex = "";
//全选、全不选
$scope.checkAll = false;
$scope.checkAllFun = function() {
if($scope.checkAll) {
for(index in $scope.user) {
$scope.user[index].state = true;
}
} else {
for(index in $scope.user) {
$scope.user[index].state = false;
}
}
};
//批量删除
$scope.plDelete = function() {
var arr = [];
for(index in $scope.user) {
if($scope.user[index].state) {
arr.push($scope.user[index]);
}
}
if(confirm("您确定要删除吗?")) {
for(index1 in arr) {
for(index2 in $scope.user) {
if(arr[index1] == $scope.user[index2]) {
$scope.user.splice(index2, 1);
$scope.checkAll = false;
}
}
}
}
}
//过滤年龄
$scope.test = function(x) {
var age = $scope.searchAge;
var a = age.split("-");
if(age == "" || age == undefined) {
return true;
}
var min = a[0];
var max = a[1];
if(x >= min && x <= max) {
return true;
} else {
return false;
}
};
//删除全部
$scope.shan = function() {
$scope.user = "";
};
//按照年龄高低排序
$scope.checkOrder = "";
$scope.changeOrder = function() {
if($scope.checkOrder == "") {
} else if($scope.checkOrder == "age") {
$scope.orderFlag = "";
$scope.orderClumn = "age";
} else {
$scope.orderFlag = "-";
$scope.orderClumn = "age";
}
};
//添加用户
$scope.add_sex = "男"; //默认性别选择男
$scope.add = function() {
if($scope.add_id == "" || $scope.add_id == null || $scope.add_id == undefined) {
$scope.ishow = true;
return false;
} else {
$scope.ishow = false;
}
if($scope.add_uname == "" || $scope.add_uname == null || $scope.add_uname == undefined) {
$scope.ushow = true;
return false;
} else {
$scope.ushow = false;
}
if($scope.add_pwd == "" || $scope.add_pwd == null || $scope.add_pwd == undefined) {
$scope.pshow = true;
return false;
} else {
$scope.pshow = false;
}
if($scope.add_age == "" || $scope.add_age == null || $scope.add_age == undefined) {
$scope.agshow = true;
return false;
} else {
$scope.agshow = false;
}
if($scope.add_sex == "" || $scope.add_sex == null || $scope.add_sex == undefined) {
$scope.seshow = true;
return false;
} else {
$scope.seshow = false;
}
s = {
id: $scope.add_id,
uname: $scope.add_uname,
pwd: $scope.add_pwd,
age: $scope.add_age,
sex: $scope.add_sex,
state: false
};
$scope.user.push(s);
$scope.isShow = false;
};
})
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>主界面</h3> 姓名查找:
<input type="text" placeholder="姓名搜索" ng-model="searchName" />
<select ng-model="searchAge">
<option value="">---请选择年龄---</option>
<option>10-20</option>
<option>20-30</option>
<option>30-40</option>
</select>
<select ng-model="searchSex">
<option value="">---请选择性别---</option>
<option>男</option>
<option>女</option>
</select>
<button ng-click="shan()">删除全部</button>
<button ng-click="plDelete()">批量删除</button><br /><br />
<select ng-model="checkOrder" ng-change="changeOrder()">
<option value="">---请选择---</option>
<option value="age">按年龄从高到低</option>
<option value="-age">按年龄从低到高</option>
</select>
<button ng-click="isShow = true">添加用户</button>
<br /><br />
<table border="1px" cellpadding="10" cellspacing="0">
<thead>
<tr>
<th>全选:<input type="checkbox" ng-model="checkAll" ng-click="checkAllFun()" /></th>
<th>序号</th>
<th>姓名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody align="center">
<tr ng-repeat="u in user | filter:{uname:searchName} | filter:{sex:searchSex} | orderBy:(orderFlag+orderClumn)" ng-show="test(u.age)">
<td><input type="checkbox" ng-model="u.state" /></td>
<td>{{u.id}}</td>
<td>{{u.uname}}</td>
<td><span ng-hide="xsinput">{{u.pwd}}</span><span ng-show="xsinput"><input type="text" ng-model="u.pwd"/><button ng-click="xsinput = false">保存</button></span></td>
<td>{{u.age}}</td>
<td>{{u.sex}}</td>
<td><button ng-click="xsinput = true">修改密码</button></td>
</tr>
</tbody>
</table><br />
<div ng-show="isShow" id="a">
<label>
<input type="text" placeholder="请输入序号" ng-model="add_id"/><span ng-show="ishow">id不能为空</span>
</label>
<label>
<input type="text" placeholder="请输入用户名" ng-model="add_uname"/><span ng-show="ushow">姓名不能为空</span>
</label>
<label>
<input type="password" placeholder="请输入密码" ng-model="add_pwd"/><span ng-show="pshow">密码不能为空</span>
</label>
<label>
<input type="number" placeholder="请输入年龄" ng-model="add_age"/><span ng-show="agshow">年龄不能为空</span>
</label>
<label>
<input type="radio" ng-model="add_sex" value="男"/>男
<input type="radio" ng-model="add_sex" value="女"/>女
<span ng-show="seshow">性别必选</span>
</label>
<label>
<button ng-click="add()">提交</button>
</label>
</div>
</center>
</body>
</html>