<!DOCTYPE html>
<html ng-app="UsersApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<script type="text/javascript" src="jquery.1.12.4.js"></script>
<script type="text/javascript" src="angular-1.3.0.js"></script>
<title>用户</title>
<script type="text/javascript">
var app = angular.module("UsersApp", []);
app.controller("UsersCtrl", function ($scope) {
$scope.data = [
{
id: 1,
name: "aa",
password: "aa",
age: 10,
sex: "男"
},
{
id: 2,
name: "bb",
password: "bb",
age: 20,
sex: "男"
},
{
id: 3,
name: "cc",
password: "cc",
age: 30,
sex: "男"
},
{
id: 4,
name: "dd",
password: "dd",
age: 40,
sex: "男"
}
];
var id = 1;
$scope.add = function () {
$scope.data.push({
id: id++,
name: $scope.name,
password: $scope.password,
age: $scope.age,
sex: $scope.sex
});
$scope.name = "";
$scope.password = "";
$scope.age = "";
$scope.sex = "";
$scope.addUserIsShow = false;
};
$scope.addUser = function () {
$scope.addUserIsShow = true;
};
$scope.editUser = function (index) {
var user = $scope.data[index];
$scope.e_name = user.name;
$scope.e_old_password = "";
$scope.e_password = "";
$scope.e_repassword = "";
$scope.editUserIsShow = true;
$scope.index = index;
};
$scope.edit = function () {
if ($scope.e_password != $scope.e_repassword) {
alert("两次密码不一致!");
return;
}
$scope.data[$scope.index].password = $scope.e_password;
$scope.addUserIsShow = 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]);
}
}
};
});
$(function () {
$("input[name='check_all']").click(function () {
var chked = this.checked;
$("input[name='users']").each(function () {
this.checked = chked;
});
});
});
</script>
</head>
<body ng-controller="UsersCtrl">
<div>
<input type="text" ng-model="s_name" placeholder="用户名查询" ng-change="searchByName()"/>
</div>
<table border="1">
<tr>
<th>
<input type="checkbox" name="check_all"/>
</th>
<th>ID</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr ng-repeat="user in data">
<td>
<input type="checkbox" name="users"/>
</td>
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.password }}</td>
<td>{{ user.age }}</td>
<td>{{ user.sex }}</td>
<td>
<button ng-click="editUser($index)">修改密码</button>
</td>
</tr>
</table>
<button ng-click="addUser()">添加用户</button>
<div ng-show="addUserIsShow">
<table border="1">
<tr>
<td>
用户名:
</td>
<td>
<input type="text" ng-model="name"/>
</td>
</tr>
<tr>
<td>
密码:
</td>
<td>
<input type="text" ng-model="password"/>
</td>
</tr>
<tr>
<td>
年龄:
</td>
<td>
<input type="text" ng-model="age"/>
</td>
</tr>
<tr>
<td>
性别:
</td>
<td>
<input type="text" ng-model="sex"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button ng-click="add()">提交</button>
</td>
</tr>
</table>
</div>
<div ng-show="editUserIsShow">
<table border="1">
<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"/>
</td>
</tr>
<tr>
<td>
新密码:
</td>
<td>
<input type="text" ng-model="e_password"/>
</td>
</tr>
<tr>
<td>
确认密码:
</td>
<td>
<input type="text" ng-model="e_repassword"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="hidden" ng-model="index"/>
<button ng-click="edit()">提交</button>
</td>
</tr>
</table>
</div>
</body>
</html>
<html ng-app="UsersApp">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
<script type="text/javascript" src="jquery.1.12.4.js"></script>
<script type="text/javascript" src="angular-1.3.0.js"></script>
<title>用户</title>
<script type="text/javascript">
var app = angular.module("UsersApp", []);
app.controller("UsersCtrl", function ($scope) {
$scope.data = [
{
id: 1,
name: "aa",
password: "aa",
age: 10,
sex: "男"
},
{
id: 2,
name: "bb",
password: "bb",
age: 20,
sex: "男"
},
{
id: 3,
name: "cc",
password: "cc",
age: 30,
sex: "男"
},
{
id: 4,
name: "dd",
password: "dd",
age: 40,
sex: "男"
}
];
var id = 1;
$scope.add = function () {
$scope.data.push({
id: id++,
name: $scope.name,
password: $scope.password,
age: $scope.age,
sex: $scope.sex
});
$scope.name = "";
$scope.password = "";
$scope.age = "";
$scope.sex = "";
$scope.addUserIsShow = false;
};
$scope.addUser = function () {
$scope.addUserIsShow = true;
};
$scope.editUser = function (index) {
var user = $scope.data[index];
$scope.e_name = user.name;
$scope.e_old_password = "";
$scope.e_password = "";
$scope.e_repassword = "";
$scope.editUserIsShow = true;
$scope.index = index;
};
$scope.edit = function () {
if ($scope.e_password != $scope.e_repassword) {
alert("两次密码不一致!");
return;
}
$scope.data[$scope.index].password = $scope.e_password;
$scope.addUserIsShow = 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]);
}
}
};
});
$(function () {
$("input[name='check_all']").click(function () {
var chked = this.checked;
$("input[name='users']").each(function () {
this.checked = chked;
});
});
});
</script>
</head>
<body ng-controller="UsersCtrl">
<div>
<input type="text" ng-model="s_name" placeholder="用户名查询" ng-change="searchByName()"/>
</div>
<table border="1">
<tr>
<th>
<input type="checkbox" name="check_all"/>
</th>
<th>ID</th>
<th>用户名</th>
<th>密码</th>
<th>年龄</th>
<th>性别</th>
<th>操作</th>
</tr>
<tr ng-repeat="user in data">
<td>
<input type="checkbox" name="users"/>
</td>
<td>{{ user.id }}</td>
<td>{{ user.name }}</td>
<td>{{ user.password }}</td>
<td>{{ user.age }}</td>
<td>{{ user.sex }}</td>
<td>
<button ng-click="editUser($index)">修改密码</button>
</td>
</tr>
</table>
<button ng-click="addUser()">添加用户</button>
<div ng-show="addUserIsShow">
<table border="1">
<tr>
<td>
用户名:
</td>
<td>
<input type="text" ng-model="name"/>
</td>
</tr>
<tr>
<td>
密码:
</td>
<td>
<input type="text" ng-model="password"/>
</td>
</tr>
<tr>
<td>
年龄:
</td>
<td>
<input type="text" ng-model="age"/>
</td>
</tr>
<tr>
<td>
性别:
</td>
<td>
<input type="text" ng-model="sex"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button ng-click="add()">提交</button>
</td>
</tr>
</table>
</div>
<div ng-show="editUserIsShow">
<table border="1">
<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"/>
</td>
</tr>
<tr>
<td>
新密码:
</td>
<td>
<input type="text" ng-model="e_password"/>
</td>
</tr>
<tr>
<td>
确认密码:
</td>
<td>
<input type="text" ng-model="e_repassword"/>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="hidden" ng-model="index"/>
<button ng-click="edit()">提交</button>
</td>
</tr>
</table>
</div>
</body>
</html>