angularjs综合

最新推荐文章于 2018-06-29 17:08:44 发布
原创最新推荐文章于 2018-06-29 17:08:44 发布 · 226 阅读
0 ·
CC 4.0 BY-SA版权
本文介绍了一个使用AngularJS实现的简单应用程序案例，包括用户信息查询、排序、添加和删除等功能。通过此案例，读者可以了解AngularJS的基本用法及如何与HTML、CSS和JavaScript结合使用。
摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>AngularJS综合</title>
		<!--导包 -->
		<link rel="stylesheet" type="text/css" href="css/bootstrap.min.css" />
		<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery-3.2.1.min.js" type="text/javascript" charset="utf-8"></script>
		<!--添加css样式-->
		<style type="text/css">
			* {
				margin: 0 auto;
				padding: 0;
			}
			
			.content {
				margin-left: 400px;
				margin-top: 50px;
				display: flex;
				flex-direction: row;
			}
			
			.left {
				flex: 1;
			}
			
			.left input {
				width: 300px;
				height: 30px;
			}
			
			.right {
				flex: 1;
			}
			
			.right select {
				width: 300px;
				height: 30px;
			}
			
			.mm {
				margin-left: 400px;
				margin-top: 20px;
			}
			
			table {
				margin-left: 400px;
				width: 1060px;
			}
			
			.footer {
				width: 500px;
				margin-top: 30px;
			}
			
			.footer input {
				width: 100px;
				height: 30px;
				margin-left: 30px;
			}
			
			.tj {
				width: 270px;
				margin-left: 810px;
				margin-top: 30px;
				border: 1px solid black;
				padding: 30px;
			}
			
			.bc {
				width: 50px;
				height: 30px;
				margin-left: 80px;
			}
		</style>
	</head>

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

		<div class="content">
			<div class="left">
				姓名查询条件:<input type="text" id="name1" value="" />
			</div>
			<div class="right">
				<select ng-model="xuanxiang" ng-options="x for x in names" ng-init="xuanxiang = names[0]" ng-change="change()"></select>
			</div>
		</div>

		<div class="mm">
			用户列表
		</div>

		<table border="1px" style="text-align: center;" cellspacing="0px" cellpadding="0px" class="table-striped table-hover">
			<tr style="background: #999999;">
				<td><input type="checkbox" id="quan" ng-click="quan()" /></td>
				<td>姓名</td>
				<td>年龄</td>
				<td>拼音</td>
				<td>职位</td>
				<td>操作</td>
			</tr>
			<tr ng-repeat="p in persons">
				<td><input type="checkbox" class="myCb" /></td>
				<td>{{p.name}}</td>
				<td>{{p.age}}</td>
				<td>{{p.pinyin}}</td>
				<td>{{p.zhiwei}}</td>
				<td><a href="#" ng-click="dele($index)" style="text-decoration: none; color: #000000;">删除 </a></td>
			</tr>
		</table>

		<div class="footer">
			<input type="button" id="cha" value="查询" ng-click="cha()" />
			<input type="button" id="add" value="添加用户" ng-click="add()" />
			<input type="button" id="piliang" ng-click="deleAll()" value="批量删除" />
		</div>

		<div class="tj" ng-show="show">
			添加用户信息<br />
			<br />姓名:<input type="text" id="name" /><br />
			<br />年龄:<input type="text" id="age" /><br />
			<br />拼音:<input type="text" id="pinyin" /><br />
			<br />职位:<input type="text" id="zhiwei" /><br />
			<br /><input type="button" class="bc" ng-click="submit()" value="保存" /><br />
		</div>

		<script type="text/javascript">
			//创建模型
			var mo = angular.module("myApp", []);
			//创建控制器
			mo.controller("myCtrl", function($scope) {
				//下拉框显示的内容
				$scope.names = ["按年龄倒序", "按年龄正序"];

				//初始化数据
				$scope.persons = [{
					"name": "张三",
					"age": 45,
					"pinyin": "zhang san",
					"zhiwei": "总经理"
				}, {
					"name": "李四",
					"age": 43,
					"pinyin": "li si",
					"zhiwei": "设计师"
				}, {
					"name": "王五",
					"age": 40,
					"pinyin": "wang wu",
					"zhiwei": "工程师"
				}];

				//查询
				$scope.cha = function() {
					//获取用户输入的信息
					var name = $("#name1").val();
					//判断用户输入的信息
					if (name == "") {
						//如果姓名为空则提示
						alert("请输入姓名");
						return;
					}

					//判断是否包含敏感词
					if (name.indexOf("三") != -1) {
						//如包含则提示
						alert("包含敏感词");
						return;
					}

					//创建新的数组
					var newPerson = [];
					//遍历
					for (var i = 0; i < $scope.persons.length; i++) {
						var p = $scope.persons[i];
						if (p.name == name) {
							newPerson.push(p);
						}
					}

					//判断用户输入的信息表中是否存在
					if (newPerson.length == 0) {
						//如不存在则提示
						alert("无匹配项");
						return;
					}

					//如存在，则替换 
					$scope.persons = newPerson;
				}

				//排序
				$scope.change = function() {
					var xx = $scope.xuanxiang;
					//判断用户选择的排序方式
					if (xx == "按年龄倒序") {//正序排序
						$scope.persons.sort(function(a, b) {
							if (a.age < b.age) {
								return 1;
							} else if (a.age > b.age) {
								return -1;
							}
							return 0;
						});
					} else {//倒序排序
						$scope.persons.sort(function(a, b) {
							if (a.age < b.age) {
								return -1;
							} else if (a.age > b.age) {
								return 1;
							}
							return 0;
						});
					}
				}

				//显示添加用户列表
				$scope.add = function() {
					$scope.show = true;
				}

				//保存按钮的点击事件
				$scope.submit = function() {
					//获取用户输入的信息
					var name = $("#name").val();
					var age = $("#age").val();
					var pinyin = $("#pinyin").val();
					var zhiwei = $("#zhiwei").val();

					//判断用户输入的姓名
					if (name == "") {//姓名为空,则提示
						alert("请输入姓名");
						return;
					}

					//验证用户输入的信息是否与表中信息重复
					for (var i = 0; i < $scope.persons.length; i++) {
						var p0 = $scope.persons[i];
						var pname = p0.name;
						//判断
						if (pname == name) {
							//如果重复则 提示
							alert("重复输入");
							return;
						}
					}

					//获取用户输入的年龄
					var age = $("#age").val();
					var b = isNaN(age);
					//判断年龄格式是否为数字
					if (b == true) {
						//如不是数字则提示
						alert("年龄格式不正确");
						return;
					}

					//创建一个新的数组
					var newPersons = {
						"name": name,
						"age": age,
						"pinyin": pinyin,
						"zhiwei": zhiwei
					}

					//替换
					$scope.persons.push(newPersons);
					//隐藏添加用户列表
					$scope.show = false;
				}

				//删除
				$scope.dele = function($index) {
					if (confirm("确定删除吗?")) {
						$scope.persons.splice($index, 1);
					} else {

					}
				}

				//批量删除
				$scope.deleAll = function() {
					var b = confirm("是否确认删除");
					if (b == true) {
						//获取选择的复选框
						var cbs = $("input[type=checkbox][class=myCb]:checked");
						//遍历,删除所选复选框所在行
						for (var i = 0; i < cbs.length; i++) {
							//取出每个复选框
							var cb = cbs[i];
							//删除所在行
							var tr = cb.parentNode.parentNode;
							tr.remove();
						}
					}
				}

				//全选和全不选
				var flag = false;
				$scope.quan = function() {

					var cbs = $("input[type=checkbox]");
					if (flag == false) {
						for (var i = 0; i < cbs.length; i++) {
							var cb = cbs[i];
							cb.checked = true;
						}
						flag = true;
					} else {
						for (var i = 0; i < cbs.length; i++) {
							var cb = cbs[i];
							cb.checked = false;
						}
						flag = false;
					}

				}
			});
		</script>

	</body>

</html>