人事管理

最新推荐文章于 2023-09-16 09:45:00 发布

151242361

最新推荐文章于 2023-09-16 09:45:00 发布

阅读量422

点赞数 1

本文链接：https://blog.csdn.net/gengtianbo/article/details/78853975

版权

<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title></title>
<script type="text/javascript" src="js/angular.js"></script>
<style>
.tab tr:nth-child(even) {
background: #FFFFFF;
}

.tab tr:nth-child(odd) {
background: #EEEEEE;
}
</style>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.users = [{
name: "张三",
age: 45,
pin: "zhangsan",
zhi: "总经理"
}, {
name: "李四",
age: 50,
pin: "lisi",
zhi: "设计师"
}, {
name: "王五",
age: 30,
pin: "wangwu",
zhi: "工程师"
}, {
name: "赵六",
age: 33,
pin: "zhaoliu",
zhi: "工程师"
}, {
name: "周七",
age: 32,
pin: "zhouqi",
zhi: "人事经理"
}];
//添加
$scope.addUser = function() {
var flag1 = false;
var flag2 = false;
var flag3 = false;
var flag4 = false;

if($scope.newName == "" || $scope.newName == null) {
alert("姓名不能为空");
flag1 = false;
} else {
flag1 = true;
}

var flag = false;
for(index in $scope.users) {
if($scope.newName == $scope.users[index].name) {
flag = true;
}
}
if(flag) {
alert("姓名重复");
flag1 = false;
} else {
flag1 = true;
}
if($scope.newAge == "" || $scope.newAge == null) {
alert("年龄不能为空");
flag2 = false;
} else if(isNaN($scope.newAge)) {
alert("年龄必须是数字");
flag2 = false;
} else {
flag3 = true;
}
if($scope.newPin == "" || $scope.newPin == null) {
alert("拼音不能为空");
flag3 = false;
} else {
flag3 = true;
}
if($scope.newZhi == "" || $scope.newZhi == null) {
alert("职位不能为空");
flag4 = false;
} else {
flag4 = true;
}

$scope.users.push({
name: $scope.newName,
age: $scope.newAge,
pin: $scope.newPin,
zhi: $scope.newZhi
});
$scope.newName = "";
$scope.newAge = "";
$scope.newPin = "";
$scope.newZhi = "";
}
$scope.de = function(name) {
if(window.confirm("确定要删除" + name + "吗？")) {
for(index in $scope.users) {
if(name == $scope.users[index].name) {
$scope.users.splice(index, 1);
}
}
}
}
$scope.searchName = function() {
var flag = false;
$scope.searchShow = "";
for(index in $scope.users) {
if($scope.search == $scope.users[index].name) {
flag = true
}
}
if($scope.search == null || $scope.search == "") {
alert("输入框不能为空");
$scope.searchShow = "";
} else if(flag) {
alert("商品存在");
$scope.searchShow = $scope.search;
} else {
alert("商品不存在");
$scope.searchShow = null;
}

}
$scope.checked = false;
var a = 0;
//全选
$scope.select = function() {
if($scope.checked) {
for(var i = 0; i < $scope.users.length; i++) {
$scope.users[i].state = true;
a++;
}
} else {
for(var i = 0; i < $scope.users.length; i++) {
$scope.users[i].state = true;
a--;
}
}
}
$scope.selectOne = function(index) {
if($scope.users[index].state) {
a++;
} else {
a--;
}
if(a == $scope.users.length) {
$scope.checked = true;
} else {
$scope.checked = false;
}
}
//点击批量删除
$scope.delSelect = function() {
if(a == 0) {
alert("请选择要删除的商品！");
} else {
for(var i = 0; i < $scope.users.length; i++) {
if($scope.users[i].state) {
$scope.users.splice(i, 1);
i--;
a--;
}
}
$scope.checked = false;
alert("删除成功！");
}
}

});
</script>
</head>

<body ng-app="myApp" ng-controller="myCtrl">
<center>

<h1>用户列表</h1><br /><br /> 姓名查询条件：
<input type="text" ng-model="search" />
<select ng-model="age">
<option value="">--排序方法--</option>
<option value="-age">按年龄倒序</option>
<option value="age">按年龄正序</option>
</select><br /><br />
<button ng-click="delSelect()">批量删除</button>
<table border="1" cellspacing="0" cellpadding="0" class="tab">
<tr>
<th><input type="checkbox" ng-model="checked" ng-click="select()" /></th>
<th>姓名</th>
<th>年龄</th>
<th>拼音</th>
<th>职位</th>
<th>操作</th>
</tr>
<tr ng-repeat="user in users | filter:searchShow | orderBy:age">
<th><input type="checkbox" ng-model="user.state" ng-click="selectOne($index)" /></th>
<td>{{user.name}}</td>
<td>{{user.age}}</td>
<td>{{user.pin}}</td>
<td>{{user.zhi}}</td>
<td><button ng-click="de(user.name)" />删除</button>
</td>
</tr>
</table>
<button ng-click="searchName()">查询</button>  <button>添加用户</button>
<tbody>
<fieldset id="" style="width:240px;">
<legend>添加用户信息</legend><br />
<form>
姓名：<input type="text" ng-model="newName" /><br /><br /> 年龄：
<input type="text" ng-model="newAge" /><br /><br /> 拼音：
<input type="text" ng-model="newPin" /><br /><br /> 职位：
<input type="text" ng-model="newZhi" /><br /><br />
<button ng-click="addUser() ">保存</button>
</form>
</fieldset>
</tbody>
</center>
</body>

</html>

151242361

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
人事管理

.tab tr:nth-child(even) {background: #FFFFFF;}.tab tr:nth-child(odd) {background: #EEEEEE;}var app = angular.module("myApp", []);app.controller("myCtrl", function($scope) {$scope
复制链接

扫一扫