AngularJS应用实践-优快云博客

本文链接：https://blog.youkuaiyun.com/Ason_haiyu/article/details/79099938

<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			label {
				display: block;
			}
		</style>
		<script type="text/javascript" src="js/angular.min.js"></script>
		<script>
			var app = angular.module("myapp", []);
			app.controller("democ", function($scope, $http) {
				$scope.add_sex = '男'; //默认选中
				//get获取字符串解析
				$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
					.then(function(d) {
						$scope.stus = d.data; //json串  根据键获取值   对象.键名
					});
				//用方法获取年龄(系统当前时间-出生时间)
				$scope.getAge = function(bir) {
					var b = new Date(bir).getYear(); //出生年份
					var newb = new Date().getYear();
					return newb - b;
				}
				//全/选
				$scope.ckall = function() {
					for(var i = 0; i < $scope.stus.length; i++) {
						$scope.stus[i].ck = $scope.flag;
					}
				}
				//批量删除
				$scope.dels = function() {
					for(var i = 0; i < $scope.stus.length; i++) {
						//判断当前行是否被勾选,如果勾选则进行删除操作
						if($scope.stus[i].ck) {
							//删除完毕后,下个对象自动移动到当前索引
							$scope.stus.splice(i, 1);
							i--;
						}
					}
				}
				//全部删除
				$scope.delall = function($index) {
					$scope.stus.splice($index);
				}
				//点击单行按钮删除
				$scope.del = function(index) {
					var c = confirm("确定删除吗？");
					if(c == true) {
						$scope.stus.splice(index, 1);
					}
				}
				//插入部门查询
				$scope.getDname = function(dname) {
					if($scope.select == undefined || $scope.select == "") {
						return true;
					}
					//indexOf查找一个字符串
					if(dname.indexOf($scope.select) > -1) {
						return true;
					}
					return false;
				}
				//添加判断
				$scope.save = function() {
					//存放错误提示信息的数组
					$scope.errors = [];
					//判断姓名
					if($scope.add_name == undefined || $scope.add_name == "") {
						$scope.val_name = true;
						$scope.errors.push(1);
					} else {
						$scope.val_name = false;
					}
					//判断年龄
					if($scope.add_age == undefined || $scope.add_age == "" || $scope.add_age < 0) {
						$scope.val_age = true;
						$scope.errors.push(1);
					} else {
						$scope.val_age = false;
					}
					//判断薪资
					if($scope.add_salary == undefined || $scope.add_salary == "") {
						$scope.val_salary = true;
						$scope.errors.push(1);

					} else {
						$scope.val_salary = false;
					}
					//出生日期
					if($scope.add_date == undefined || $scope.add_date == "") {
						$scope.val_date = true;
						$scope.errors.push(1);

					} else {
						$scope.val_date = false;
					}
					//判断部门
					var obj_d;
					if($scope.add_job == undefined || $scope.add_job == "") {
						$scope.errors.push(4);
					} else {
						if($scope.add_job=="市场部"){
							obj_d={id:1,name:$scope.add_job};
						}else if($scope.add_job=="研发部"){
							obj_d={id:2,name:$scope.add_job};
						}
					}

					if($scope.errors.length == 0) {
						$scope.stus.push({
							"salary": $scope.add_salary,
							"birthday": $scope.add_date.valueOf(), //获取date日期的毫秒数
							"department": obj_d,
							"gender": $scope.add_sex,
							"id": $scope.stus.length + 100,
							"name": $scope.add_name
						});
						console.log($scope.stus);
						
					}
				}

			})
		</script>
	</head>

	<body ng-app="myapp" ng-controller="democ">
		<input style="border-radius:50px ;" type="text" placeholder="姓名模糊查询" ng-model="xmcx" />
		<input style="border-radius:50px ;" type="text" placeholder="部门模糊查询" ng-model="select" />
		<select ng-model="px">
			<option>根据薪资排序</option>
			<option value="+salary">升序</option>
			<option value="-salary">降序</option>

		</select>
		<button ng-click="dels()">批量删除</button>
		<button ng-click="delall($index)">清空购物车</button>
		<!--页面无数据时显示数据 -->
		<h1 ng-show="stus.length==0">
			购物车为空，继续添加
		</h1>
		<!-- 如果有数据则显示table和表头 -->
		<div ng-show="stus.length>0">
			<table style="width: 600px;" border="1" cellspacing="0">
				<tr>
					<!--ckall()方法记得加括号-->
					<td><input type="checkbox" ng-click="ckall()" ng-model="flag" /></td>
					<td>员工姓名</td>
					<td>员工年龄</td>
					<td>员工性别</td>
					<td>员工薪资</td>
					<td>出生日期</td>
					<td>部门名称</td>
					<td>操作</td>
				</tr>
				<!--ng-show="getDname(s.department.name)"为查询定义方法-->
				<tr ng-repeat="s in stus|orderBy:px|filter:{name:xmcx}" ng-show="getDname(s.department.name)">
					<td><input type="checkbox" ng-model="s.ck" /></td>
					<td>{{s.name}}</td>
					<td>{{getAge(s.birthday)}}</td>
					<td>{{s.gender}}</td>
					<td>{{s.salary|currency:'￥'}}</td>
					<td>{{s.birthday|date:"yyyy-MM-dd hh:mm:ss"}}</td>
					<td>{{s.department.name}}</td>
					<td>
						<button ng-click="del($index)">删除</button>
						<button ng-click="upd()">修改</button>
					</td>
				</tr>
			</table>
		</div>
		<!--新增用户-->
		<button ng-click="showadd=true">添加</button>
		<div ng-show="showadd">
			<label>
				员工姓名：<input type="text" placeholder="请输入姓名" ng-model="add_name" /><span ng-show="val_name">姓名不合法</span>
			</label>
			<label>
				员工年龄：<input type="number" placeholder="请输入年龄" ng-model="add_age" /><span ng-show="val_age">年龄不合法</span>
			</label>
			<label>
				员工性别：<input type="radio" name="sex" ng-model="add_sex" value="男" />男
					  <input type="radio" name="sex" ng-model="add_sex" value="女" />女
			</label>
			<label>
				员工薪资：<input type="number" placeholder="请输入薪资" ng-model="add_salary" /><span ng-show="val_salary">薪资不合法</span>
			</label>
			<label>
				出生日期：<input type="date" placeholder="请输入出生日期" ng-model="add_date" /><span ng-show="val_date">生日不合法</span>
			</label>
			<label>
				<select ng-model="add_job">
					<option value="">--选择部门--</option>
					<option>市场部</option>
					<option>研发部</option>
				</select>
				<span ng-show="val_job">部门不合法</span>
			</label>
			<button ng-click="save()">保存</button>
	
	</body>

</html>

月考总结唯缺修改