angular实现添加,删除,查询,排序

最新推荐文章于 2019-07-19 16:48:23 发布

原创最新推荐文章于 2019-07-19 16:48:23 发布 · 305 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #html #css

前端学习小案例专栏收录该内容

9 篇文章

订阅专栏

本文介绍了一个使用AngularJS实现的简单应用程序案例，包括用户信息管理功能，如查询、排序、添加和删除等操作，并展示了如何通过AngularJS指令和控制器来实现这些功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<img data-cke-saved-src="https://img-my.youkuaiyun.com/uploads/201712/09/1512791851_4449.png-thumb.jpg" src="https://img-my.youkuaiyun.com/uploads/201712/09/1512791851_4449.png-thumb.jpg" alt="" />

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/angular.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			tr:nth-of-type(odd) {
				background: red;
			}
			
			tr:nth-of-type(even) {
				background: yellow;
			}
			
			a {
				text-decoration: none;
			}
		</style>
	</head>

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

		<input type="text" ng-model="name" class="cha" />
		<select ng-change="change()" ng-model="age" ng-init="age=ages[0]">
			<option ng-repeat="x in ages">{{x}}</option>
		</select>
		<table border="1px">

			<tr style="background: gray;">
				<th>姓名</th>
				<th>年龄</th>
				<th>拼音</th>
				<th>职位</th>
				<th>操作</th>
			</tr>
			<tr ng-repeat="person in persons">
				<th>{{person.name}}</th>
				<th>{{person.age}}</th>
				<th>{{person.pin}}</th>
				<th>{{person.zhiwei}}</th>
				<th><a href="#" ng-click="dele($index)">删除</a></th>
			</tr>
		</table>
		<input type="button" value="查询" ng-click="cha()" />
		<input type="button" value="添加" ng-click="xianshi()"/>
		<hr />
		<fieldset ng-show="xs">
			<legend>添加用户信息</legend>
			姓名:<input type="text" ng-model="name1"/><br>
			年龄:<input type="text" ng-model="age1"/><br>
			拼音:<input type="text" ng-model="pin1"/><br>
			职位:<input type="text" ng-model="zhiwei1"/><br>
			<input type="button" value="保存" ng-click="add()"/>
		</fieldset>
		<script type="text/javascript">
			var mo = angular.module("myApp", []);
			mo.controller("myCtrl", function($scope) {

				$scope.ages = ["按年龄正序排序", "按年龄倒序排列"];
				//定义数组
				$scope.persons = [{
					"name": "张三",
					"age": 22,
					"pin": "zhnagsan",
					"zhiwei": "总经理"
				}, {
					"name": "李四",
					"age": 20,
					"pin": "lisi",
					"zhiwei": "总经理"
				}, {
					"name": "杨过",
					"age": 25,
					"pin": "yangguo",
					"zhiwei": "总经理"
				}];
				//排序
				$scope.change = function() {
						var a1 = $scope.age;
						console.log("--" + a1);
						if (a1 == "按年龄倒序排列") {
							console.log(a1 + "----")
							$scope.persons.sort(function(a, b) {

								return b.age - a.age;

							});
						} else {
							$scope.persons.sort(function(a, b) {

								return a.age - b.age;

							});
						}
					}
					//查询
				$scope.cha = function() {
					//每次查询的时候，为了防止第二次失败，需要充值数组
					$scope.persons = [{
						"name": "张三",
						"age": 22,
						"pin": "zhnagsan",
						"zhiwei": "总经理"
					}, {
						"name": "李四",
						"age": 20,
						"pin": "lisi",
						"zhiwei": "总经理"
					}, {
						"name": "杨过",
						"age": 25,
						"pin": "yangguo",
						"zhiwei": "总经理"
					}];
					//新数组
					var newPersons = [];
					var n = $scope.name;
					if (n == "") {
						alert("名字不能为空")
						return;
					}
					//遍历
					for (var i = 0; i < $scope.persons.length; i++) {

						var n1 = $scope.persons[i].name;
						if (n == n1) {
							newPersons.push($scope.persons[i]);
						}

					}
					//判断
					if (newPersons.length == 0) {
						alert("没有匹配项");
						return;
					}
					$scope.persons = newPersons;
				}
				//删除
				$scope.dele = function($index){
					
					
					$scope.persons.splice($index,1);
					
					return false;
				}
				//控制显示/隐藏
				$scope.xianshi = function(){
					$scope.xs = true;
				}
				//保存
				$scope.add = function(){
					//创建对象
					var obj = {
						"name": $scope.name1,
						"age": $scope.age1,
						"pin": $scope.pin1,
						"zhiwei": $scope.zhiwei1
					};
					$scope.persons.push(obj);
					//隐藏掉
					$scope.xs = false;
				}
			})
		</script>
	</body>

</html>