angularjs 查询

最新推荐文章于 2019-04-13 17:27:43 发布

原创最新推荐文章于 2019-04-13 17:27:43 发布 · 311 阅读

CC 4.0 BY-SA版权

本文介绍了一个基于AngularJS框架实现的员工信息管理系统案例。该系统具备增删查改等功能，并通过$http服务与后端进行数据交互。同时实现了数据验证、批量删除及部门模糊查询等实用功能。

	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="UTF-8">
	<title></title>
	<script src="js/angular.min.js"></script>
	<script src="js/jquery-1.11.1.js"></script>
	<style>
	label{
	display: block;
	}

	span{
	color: red;
	}
	</style>
	<script>
	angular.module("gaoynapp", [])
	.controller("con", function($scope, $http) {

	$scope.depars=[{id:1,name:'研发部'},{id:2,name:'市场部'}];

	$scope.add_sex='男';



	$http.get("http://result.eolinker.com/TucCTQueffdc1d1aaa3be05d8c62e9bb5d3e8b495f97cca?uri=hybrid")
	.success(function(a) {
	$scope.persons = a; //a===>http://接口地址返回的数据自动参数a
	})


	//计算年龄的函数
	$scope.getAge = function(birth) {
	//
	var y = new Date(birth).getYear(); //每个对象年龄

	var nowy = new Date().getYear();

	return nowy - y;
	}

	$scope.del = function(id) {
	var f = confirm("确定删除?");
	if(f) { //如果点击了确定
	//根据id查找所在索引,根据索引进行删除
	for(var i in $scope.persons) {
	if($scope.persons[i].id == id) {
	$scope.persons.splice(i, 1);
	}
	}
	}
	}

	//存放删除数据


	//控制是否选择
	$scope.ckall=function(){
	console.log($scope.persons,"===");
	for(var i in $scope.persons){
	$scope.persons[i].ck=$scope.flag;

	}
	}

	//批量删除
	$scope.delall=function(){
	//批量删除,必须使用for循环,不能使用for in循环
	confirm("")

	for(var i=0;i<$scope.persons.length;i++){
	if($scope.persons[i].ck==true ){ //判断当前行是否勾选
	$scope.persons.splice(i,1); //删除
	i--; //删除时,从当前删除的索引开始
	}
	}
	}

	//
	$scope.selBM=function(dname){
	//如果查询部门的输入框没有输入内容,查询所有
	if($scope.cxbm==undefined \|\| $scope.cxbm==""){
	return true;
	}


	//模糊查询,查找部门名称中是否含有输入框输入的内容
	if(dname.indexOf($scope.cxbm)>-1){
	return true;
	}

	return false;
	}


	$scope.save=function(){

	$scope.errors=[]; //存放错误信息

	//判断姓名是否合法
	if($scope.add_uname==undefined \|\| $scope.add_uname==""){
	$scope.val_uname=true;
	$scope.errors.push(1);
	}else{
	$scope.val_uname=false;
	}

	//判断工资是否输入
	if($scope.add_salar==undefined \|\| $scope.add_salar==""){
	$scope.val_salar=true;
	$scope.errors.push(2);
	}else{
	$scope.val_salar=false;
	}

	var obj_dep;
	if($scope.add_depart==undefined\|\|$scope.add_depart==""){
	$scope. val_depart=true;
	$scope.errors.push(3);
	}else{
	//获取部门的名字
	console.log("部门名字",$scope.add_depart);

	for(var i in $scope.depars){
	if($scope.depars[i].name==$scope.add_depart){
	obj_dep=$scope.depars[i];
	}
	}
	}


	if($scope.errors.length==0){
	//添加
	$scope.persons.push(
	{
	salary:$scope.add_salar,
	birthday:755884805251,
	department:obj_dep,
	gender:$scope.add_sex,
	id:$scope.persons.length+100,
	name:$scope.add_uname
	}
	);

	//添加完毕后,清空输入框输入内容
	$scope.add_uname="";
	$scope.add_salar="";

	$scope.show_add=false;

	}



	}

	})
	</script>
	</head>
	<body ng-app="gaoynapp" ng-controller="con">
	<h2 ng-show="persons.length==0">
	当前页面为空
	</h2>

	<div ng-show="persons.length!=0">
	<input type="text" placeholder="根据部门模糊查询..." ng-model="cxbm" />
	<button ng-click="delall()">批量删除</button>
	<button ng-click="show_add=true">添加</button>


	<table border="1px">
	<tr>
	<td>
	<input type="checkbox" ng-model="flag" ng-click="ckall()" />
	</td>
	</tr>
	<tr ng-repeat="d in persons\|orderBy:'-birthday'" ng-show="selBM(d.department.name)">
	<td><input type="checkbox" ng-model="d.ck" /> </td>
	<td>{{d.name}}</td>
	<td>{{getAge(d.birthday)}}</td>
	<td>{{d.gender}}</td>
	<td>{{d.salary\|currency:":¥"}}</td>
	<td>{{d.birthday\|date:"yyyy-MM-dd hh:mm:ss"}}</td>
	<td>{{d.department.name}}</td>
	<td><button ng-click="del(d.id)">删除</button></td>
	</tr>
	</table>

	</div>
	<!-- 添加的form表单 -->
	<div ng-show="show_add">
	<label>
	<input type="text" placeholder="请输入用户名" ng-model="add_uname" /><span ng-show="val_uname">请输入用户名</span>

	</label>
	<label>
	<input placeholder="请输入工资" type="number" ng-model="add_salar" /><span ng-show="val_salar">请输入工资</span>
	</label>

	<label>
	<select ng-model="add_depart">
	<option value="">-请选择所在部门-</option>
	<option>市场部</option>
	<option>研发部</option>
	</select>
	<span ng-show="val_depart">请选择有效部门</span>
	</label>

	<label>
	<input type="radio" ng-model="add_sex" value="男" />男
	<input type="radio" ng-model="add_sex" value="女" />女
	</label>
	<label>
	生日<input type="date" ng-model="add_birth" />
	</label>

	<button ng-click="save()">保存</button>

	</div>

	</body>
	</html>