AngularJS用户列表

最新推荐文章于 2023-07-16 21:09:04 发布

Mike_8859

最新推荐文章于 2023-07-16 21:09:04 发布

阅读量263

点赞数

本文链接：https://blog.csdn.net/Mike_chao/article/details/78596249

版权

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			a{
				text-decoration: none;
				color: #000;
			}
			
			table tr:nth-child(even){
				background: #EEEEEE;
			}
			table tr:nth-child(odd){
				background: #fff;
			}
			
		</style>
		<script src="js/angular.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
		<script>
			var app = angular.module("myApp",[]);
			app.controller("myCtrl",function($scope){
				$scope.user = [{
					name:"张三",
					age:45,
					py:"zhangsan",
					duty:"总经理"
				},{
					name:"李四",
					age:43,
					py:"lisi",
					duty:"设计师"
				},{
					name:"王五",
					age:40,
					py:"wangwu",
					duty:"工程师"
				},{
					name:"赵流",
					age:30,
					py:"zhaoliu",
					duty:"HR"
				}];
				//查询
				$scope.name = "";
				$scope.flag = "";
				$scope.flag2 = false;
				$scope.seekName = function(){
					
					if($scope.name.indexOf("你妹")>=0){
						alert("禁止敏感词汇 ");
					}
					if ($scope.name=="") {
						alert("请输入姓名");
						$scope.flag="";
					}else{
						for (index in $scope.user) {
							if($scope.name == $scope.user[index].name){
								$scope.flag = $scope.name
								$scope.flag2 = true;
							}
						}
					}
					
					if(!$scope.flag2){
						alert("未找到匹配项 ");
					}
					
				}
				
				$scope.Show = false;
				$scope.Add = function(){
					if ($scope.Show) {
						$scope.Show = false;
					}else{
						$scope.Show = true;
					}
					
				}
				
				$scope.newName = "";
				$scope.newAge = "";
				$scope.newPy = "";
				$scope.newDuty = "";
				$scope.AddAll = function(){
					if($scope.newAge == "" || $scope.newAge==null){
						alert("年龄不能为空");
					}else if(isNaN($scope.newAge)){
						alert("年龄格式不合格");
					}else{
						var pro = {
							name:$scope.newName,
							age:parseInt($scope.newAge),
							py:$scope.newPy,
							duty:$scope.newDuty
						}
						
						$scope.user.push(pro);
					}
				}
				
				$scope.delete = function(name){
					var s = confirm("确定删除吗?");
					if(s){
						$scope.user.splice(name,1);
						alert("删除了");
					}
					
				}
			});
		</script>
	</head>
	<body ng-app="myApp" ng-controller="myCtrl">
		<center>
			<h3>用户列表</h3>
			姓名查询条件 <input type="text" ng-model="name"/>      
			<select ng-model="ageOrder">
				<option value="">--按年龄排序--</option>
				<option value="age">年龄正排序</option>
				<option value="-age">年龄倒排序</option>
			</select>
			<br />
			<br />
			<table border="1" cellspacing="0" cellpadding="10">
				<tr style="background: #333;">
					<th>姓名</th>
					<th>年龄</th>
					<th>拼音</th>
					<th>职位</th>
					<th>操作</th>
				</tr>
				<tr ng-repeat="u in user | filter:flag | orderBy:ageOrder">
					<td>{{u.name}}</td>
					<td>{{u.age}}</td>
					<td>{{u.py}}</td>
					<td>{{u.duty}}</td>
					<td><a href="#" ng-click="delete(u.name)">删除</a></td>
				</tr>
			</table>
			<br />
			<button ng-click="seekName()">查询</button>
			<button ng-click="Add()">添加用户</button>
			<br />
			<div ng-show="Show">
				<h3>用户信息添加页</h3>
				
				姓名<input type="text"  ng-model="newName"/><br /><br />
				年龄<input type="text"  ng-model="newAge"/><br /><br />
				拼音<input type="text"  ng-model="newPy"/><br /><br />
				职位<input type="text"  ng-model="newDuty"/><br /><br />
				<input type="button"  value="保存" ng-click="AddAll()"/>
				
			</div>
		</center>
	</body>
</html>

Mike_8859

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AngularJS用户列表

a{ text-decoration: none; color: #000; } table tr:nth-child(even){ background: #EEEEEE; } table tr:nth-child(odd){ background: #fff; } var app = a
复制链接

扫一扫