用户信息的操作

最新推荐文章于 2022-06-12 14:21:18 发布

Pink_空白格

最新推荐文章于 2022-06-12 14:21:18 发布

阅读量1.6k

点赞数

分类专栏： Web

本文链接：https://blog.csdn.net/BoBrother/article/details/78312595

版权

Web 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

<!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="js/angular.js" ></script>
<script type="text/javascript" src="js/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.ageSize = "";//绑定年龄范围
$scope.users = [
{"id":1,"name":"张三","pwd":"123","age":22,"sex":"男","state":false},
{"id":2,"name":"李四","pwd":"456","age":33,"sex":"女","state":false},
{"id":3,"name":"王五","pwd":"789","age":44,"sex":"男","state":false}
];
//定义页面跳转方法
$scope.goToUrl = function(path){
alert(path);
$location.path(path);
}

//年龄范围过滤
$scope.ageTest = function(age,ageSize){
//alert(ageSize);
//alert(age);
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.deleteSel = function(){
var userNames = [];
//遍历users数组，获取状态是选中的user对象的名字
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.cxSearch;
$scope.cx = function (ziduan) {
console.log(ziduan);
console.log($scope.select);
$scope.cxSearch = ziduan;
}*/

//清空购物车
$scope.removeAll = function(){
if(confirm("你确定要清空购物车所有商品吗?")){
$scope.users = [];
}
}
//全选
$scope.quan = function(){
for(i=0;i<$scope.users.length;i++){
if($scope.che == true){
$scope.users[i].state =true;
}else{
$scope.users[i].state =false;
}
}
}

$scope.dan = function(){
var count=0;
for(i=0;i<$scope.users.length;i++){
if($scope.users[i].state==true){
count++;
}
}

if($scope.users.length==count){

$scope.che = true;

}else{
$scope.che =false;
}

}

//性别筛选
$scope.ageCC="请选择";
$scope.sexTest = function(sex,sexCC){

if(sexCC=="请选择"){
return true;
}else{
if(sexCC==sex){
return true;
}else{
return false;
}
}
}

});
//自定义年龄过滤器
app.filter("ageFilter",function(){
return function(user){
alert(user);
/*if(user.age<20 || user.age>22){
return null;
}else{
return user;
}*/
}
});

//定义添加用户控制器
app.controller("addUserCtrl",function($scope){
//alert("添加用户控制器");
$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){
//alert("修改控制器");
$scope.name = $routeParams.name;
$scope.oldPwd = "";
$scope.pwd1 = "";
$scope.pwd2 = "";
//alert($scope.name);
$scope.updatePwd = function(){
//alert(pwd1);
/*if($scope.pwd1 != $scope.pwd2){
alert("两次密码不一致 ");
}*/

for(index in $scope.users){
//alert($scope.users[index].name);
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 placeholder="用户名查询" size="10" ng-model="name" ng-click="cx('name')"/> 

年龄：<select id="age" ng-model="ageSize" ng-init="ageSize='--请选择--'">
<option>--请选择--</option>
<option>11-20</option>
<option>21-30</option>
<option>31-40</option>
<option>41-50</option>
<option>51-60</option>
</select> 
性别：<select ng-model="ageCC" ng-init="请选择">
<option>请选择</option>
<option>男</option>
<option>女</option>
</select> 
<input type="button" value="全部删除" ng-click="removeAll()"/>
<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="che" ng-click="quan()"/> </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:name}" ng-if="ageTest(user.age,ageSize)" ng-show="sexTest(user.sex,ageCC)">
<td><input ng-model="user.state" type="checkbox" ng-click="dan()"/></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')">添加用户</button><br /><br />

<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>

<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>


<tbody>
<tr ng-repeat="item in users | filter:{ 'name':search} | orderBy:(orderSign+orderColumn) ">

<td>
{{item.name}}
</td>

</tr>

</tbody>


<div ng-view>

</div>
</center>
</body>

</html>

Pink_空白格

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
用户信息的操作

综合练习.addUser{width: 100px;height: 40px;font-size: 18px;background-color: #11C1F3;}var app = angular.module("myApp",["ngRoute"]);//使用config配置路由规则app.config(["$routeProvider",funct
复制链接

扫一扫