<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>综合练习</title>
<style>
.addUser{
width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3;
}
</style>
<script type="text/javascript" src="angular.js" ></script>
<script type="text/javascript" src="angular-route.js" ></script>
<script type="text/javascript">
var app = angular.module("myApp",["ngRoute"]);
//使用config配置路由规则
app.config(["$routeProvider",function($routeProvider){
$routeProvider
.when("/addUser",{
controller:"addUserCtrl",
templateUrl:"addUser.html"
})
.when("/updatePwd/:name",{
controller:"updatePwdCtrl",
templateUrl:"updatePwd.html"
})
.otherwise({redirectTo:"/addUser"});
}]);
app.controller("myCtrl",function($scope,$location) {
$scope.users = [
{"id": 1, "name": "张三", "pwd": "123", "age": 20, "sex": "男"},
{"id": 2, "name": "李四", "pwd": "456", "age": 33, "sex": "女"},
{"id": 3, "name": "王五", "pwd": "789", "age": 42, "sex": "男"}
];
//定义页面跳转方法
$scope.goToUrl = function (path) {
alert(path);
$location.path(path);
}
//全部删除
$scope.del = function () {
if (confirm("确实删除吗?")) {
$scope.users = [];
}
};
$scope.ageTest = function (age, agesize) {
if (agesize != "--请选择--") {
var ages = agesize.split("-");
var ageMin = ages[0];
var ageMax = ages[1];
if (age < ageMin || age > ageMax) {
return false;
} else {
return true;
}
} else {
return true;
}
}
$scope.sexTest = function (sex, sexsize) {
if (sexsize !== "--请选择--") {
var sexs = sexsize.split("-");
if (sexs == sex){
return true;
}else{
return false;
}
}else{
return true;
}
};
//批量删除
$scope.deleteSel=function(){
var userNames=[];
for(index in $scope.users){
if($scope.users[index].state == true){
userNames.push($scope.users[index].name);
}
}
if(userNames.length>0){
if(confirm("是否删除选中项?")){
for(i in userNames){
var name=userNames[i];
for(i2 in $scope.users){
if($scope.users[i2].name==name){
$scope.users.splice(i2,1);
}
}
}
}
}else{
alert("请选择删除的项")
}
}
//全选方法
$scope.selectAll = false;
$scope.selectAllFun = function(){
if($scope.selectAll){
//alert("afsd");
for(index in $scope.users){
$scope.users[index].state = true;
}
}else{
for(index in $scope.users){
$scope.users[index].state = false;
}
}
}
//检测是否全选
$scope.checkSelect = function(index){
var temp = 0;
if($scope.users[index].state == true){
temp++;
}else{
temp--;
}
if(temp == $scope.users.length){
$scope.selectAll = true;
}else{
$scope.selectAll = false;
}
var haha = false;
for(i in $scope.users){
if($scope.users[i].state == true){
}else{
haha = true;
}
}
if(haha){
$scope.selectAll = false;
}else{
$scope.selectAll = true;
}
}
});
//定义添加用户控制器
app.controller("addUserCtrl",function($scope) {
$scope.name = "";
$scope.pwd = "";
$scope.pwd2 = "";
$scope.age = "";
$scope.sex = "";
$scope.sub = function () {
var newUser = {
id: $scope.users.length + 1,
name: $scope.name,
pwd: $scope.pwd,
age: $scope.age,
sex: $scope.sex
}
//添加新用户.
$scope.users.push(newUser);
}
});
//定义修改用户控制器
app.controller("updatePwdCtrl",function($scope,$routeParams){
$scope.name = $routeParams.name;
$scope.oldPwd = "";
$scope.pwd1 = "";
$scope.pwd2 = "";
$scope.updatePwd = function(){
for(index in $scope.users){
if($scope.users[index].name==$scope.name){
$scope.users[index].pwd=$scope.pwd1;
}
}
}
});
</script>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
<center>
<h3>用户信息表</h3>
<div>
<input ng-model="search" placeholder="用户名查询" size="10" />
年龄:<select id="age" ng-model="agesize" ng-init="agesize='--请选择--'">
<option>--请选择--</option>
<option>19-30</option>
<option>31-40</option>
<option>41-50</option>
</select>
性别:<select id="sex" ng-model="sexsize" ng-init="sexsize='--请选择--'">
<option>--请选择--</option>
<option>男</option>
<option>女</option>
</select>
<input type="button" value="全部删除" ng-click="del()"/>
<input ng-click="deleteSel()" type="button" value="批量删除"/>
</div><br />
<div>
<table border="1" cellspacing="1" cellpadding="10">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectAll" ng-click="selectAllFun()"/></th>
<th>id</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users | filter:{'name':search}" ng-if="ageTest(user.age,agesize)" ng-show="sexTest(user.sex,sexsize)">
<td><input type="checkbox" ng-click="checkSelect($index)" ng-model="user.state"/></td>
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.pwd}}</td>
<td>{{user.age}}</td>
<td>{{user.sex}}</td>
<td><button ng-click="goToUrl('/updatePwd/'+user.name)">修改密码</button> </td>
</tr>
</tbody>
</table>
</div><br />
<button class="addUser" ng-click="goToUrl('/addUser')" id="btn">添加用户</button><br /><br />
<!-- 1.添加用户页面 -->
<script type="text/ng-template" id="addUser.html">
<form action="">
<table border="1" cellspacing="1" cellpadding="10">
<tr>
<th>用户名:</th>
<td><input ng-model="name" placeholder="请输入用户名" /></td>
</tr>
<tr>
<th>密 码:</th>
<td><input ng-model="pwd" placeholder="请输入密码" /></td>
</tr><tr>
<th>年 龄:</th>
<td><input ng-model="age" placeholder="请输入年龄" /></td>
</tr><tr>
<th>性 别:</th>
<td><input ng-model="sex" placeholder="请输入性别" /></td>
</tr>
<tr align="center">
<td colspan="2"><input type="button" ng-click="sub()" value="提交" /></td>
</tr>
</table>
</form>
</script>
<!-- 2.修改用户信息页面 -->
<script type="text/ng-template" id="updatePwd.html">
<form>
<table border="1" cellspacing="1" cellpadding="10">
<tr>
<th>用户名:</th>
<td><input disabled="disabled" ng-model="name" placeholder="请输入用户名" /></td>
</tr>
<tr>
<th>旧密码:</th>
<td><input ng-model="oldPwd" placeholder="请输入密码" /></td>
</tr><tr>
<th>新密码:</th>
<td><input ng-model="pwd1" placeholder="请输入密码" /></td>
</tr><tr>
<th>确认:</th>
<td><input ng-model="pwd2" placeholder="请输入密码" /></td>
</tr>
<tr align="center">
<td colspan="2"><input type="button" value="提交" ng-click="updatePwd()" /></td>
</tr>
</table>
</form>
</script>
<!-- 6.指定相应内容 -->
<div ng-view>
</div>
</center>
</body>
</html>
表单 增删改查
最新推荐文章于 2023-07-28 10:30:54 发布