您的位置：首页 > 其它

表格全选/添加/查询用户/修改密码

2017-10-22 19:26 375 查看 
<!DOCTYPE html>
<html  ng-app="m">
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="angular-1.3.0.js"></script>
<script type="text/javascript" src="jquery.1.12.4.js"></script>
<script type="text/javascript">
var app = angular.module("m",[]);
app.controller("myCtrl",function($scope){
//定义json串
$scope.data=[
{
id:1,
name:"曹操",
pass:"111",
age:"20",
sex:"男"
},{
id:2,
name:"刘备",
pass:"222",
age:"28",
sex:"女"
},{
id:3,
name:"关羽",
pass:"333",
age:"30",
sex:"男"
}

];
//点击添加按钮时显示添加框
$scope.adduser = function () {
$scope.addUserIsShow = true;
};
//定义变量id
var id = 4;
//点击提交按钮时刷新数据
$scope.tijiao = function () {
$scope.data.push({
id: id++,
name: $scope.name,
pass: $scope.pass,
age: $scope.age,
sex: $scope.sex
});
//添加完清空表格
$scope.name = "";
$scope.pass = "";
$scope.age = "";
$scope.sex = "";
//使表格消失
$scope.addUserIsShow = false;
};
//点击修改密码按钮显示修改框
$scope.editUser = function (index) {
var user = $scope.data[index];
$scope.e_name = user.name;
$scope.e_old_password = "";
$scope.e_password = "";
$scope.e_rep = "";
$scope.editShow = true;
$scope.index = index;
};
//点击提交按钮判断两次密码是否一致
$scope.edit = function () {
if ($scope.e_password != $scope.e_rep) {
alert("两次密码不一致！");
return;
}
//更改密码
$scope.data[$scope.index].pass = $scope.e_password;
$scope.editShow = false;
};
//根据名字搜索
//            var old_data = $scope.data;
//            $scope.searchByname = function () {
//                $scope.data = [];
//                for (var i in old_data) {
//                    if (old_data[i].name == $scope.s_name) {
//                        $scope.data.push(old_data[i]);
//                    }
//                }
//            };
$scope.searchByname = function(){
for(var i in $scope.data){
if($scope.s_name=="习近平")
{
alert("出现了违规字符");
$scope.s_name="";
return;
}
}
};
//        //全选 全不选
//        $(function () {
//            $("input[name='check_all']").click(function () {
//                var chked = this.checked;
//
//                $("input[name='users']").each(function () {
//                    this.checked = chked;
//                });
//            });
//全选全部选
//全选
$scope.che=false;
$scope.cheall=function(){
if($scope.che==true){
for(var i=0;i<$scope.data.length;i++){
$scope.data[i].check=true;
}
}else{
for(var i=0;i<$scope.data.length;i++){
$scope.data[i].check=false;
}
}
}
//反选
var a=0;
$scope.chepl=function(index){
if($scope.data[index].check==true){
a++;
}else{
a--;
}
console.log($scope.data.length);
if(a==$scope.data.length){
$scope.che=true;
}else{
$scope.che=false;
}
}
//删除
$scope.pl=function(){
for(var i=0;i<$scope.data.length;i++){
if($scope.data[i].check==true){
$scope.data.splice(i,1);
i--;
}
}
}
//全部删除
$scope.all=function(){
$scope.data=[];
$scope.che=false;
}

});
</script>

</head>
<body ng-controller="myCtrl">
<div style="width: 600px; height: 800px;margin: 0 auto">
<span ><h2>用户信息表</h2></span>
<div>

4000
<input type="text" placeholder="用户名查询"
ng-change="searchByname()" ng-model="s_name">
年龄:<select >
<option>--请选择--</option>
<option>10--30</option>
<option>30--50</option>
<option>50--60</option>
</select>
性别:<select ng-model="ser" >
<option value="男">男</option>
<option value="女">女</option>
</select>
<input type="button" value="全部删除" ng-click="all()">
<input type="button" value="批量删除" ng-click="pl()" >

</div>
<div>
<table border="1px" style="width: 500px;
height: 20px;text-align: center">
<tr>
<td><input type="checkbox" ng-model="che"  ng-click="cheall()"></td>
<td>id</td>
<td>用户名</td>
<td>密码</td>
<td>年龄</td>
<td>性别</td>
<td>操作</td>
</tr>
<tr ng-repeat="user in data | filter :{'name':s_name} |filter :{'sex':ser}">
<td><input type="checkbox" ng-model="user.check" ng-click="chepl($index)" ></td>
<td>{{user.id}}</td>
<td>{{user.name}}</td>
<td>{{user.pass}}</td>
<td>{{user.age}}</td>
<td>{{user.sex}}</td>
<td>
<input type="button" value="修改密码"
ng-click="editUser($index)">
</td>
</tr>
</table>

</div>
<div>
<input type="button" value="添加用户" ng-click="adduser()"
style="background-color: #007aff;width:100px;height:
30px;margin-left: 150px">

<table style="margin:0 85px;" ng-show="addUserIsShow">
<tr>
<td>用户名:</td>
<td><input type="text" placeholder="请输入用户名" ng-model="name"></td>
</tr>
<tr>
<td>密码:</td>
<td><input type="text" placeholder="请输入密码" ng-model="pass"></td>
</tr>
<tr>
<td>年龄:</td>
<td><input type="text" placeholder="请输入年龄" ng-model="age"></td>
</tr>
<tr>
<td>性别:</td>
<td><input type="text" placeholder="请输入性别" ng-model="sex"></td>
</tr>
<tr>

<td colspan="2" align="center">
<input type="button" value="提交" ng-click="tijiao()">
</td>
</tr>
</table>

</div>

<div>
<table style="margin:0 85px;" ng-show="editShow">
<tr>
<td>用户名:</td>
<td><input type="text" ng-model="e_name" disabled></td>
</tr>
<tr>
<td>旧密码:</td>
<td><input type="text" ng-model="e_old_password"
placeholder="请输入旧密码" >
</td>
</tr>
<tr>
<td>新密码:</td>
<td><input type="text" ng-model="e_password"
placeholder="请输入新密码">
</td>
</tr>
<tr>
<td>确认:</td>
<td><input type="text" ng-model="e_rep"
placeholder="请输入确认密码">
</td>
</tr>
<tr>

<td colspan="2" align="center">
<input type="button" value="提交" ng-click="edit()">
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航