AngularJs实现添加,批量删除,全选,反选等功能

最新推荐文章于 2018-01-18 20:24:42 发布

窗台的花花

最新推荐文章于 2018-01-18 20:24:42 发布

阅读量499

点赞数

CC 4.0 BY-SA版权

分类专栏：前端学习小案例文章标签： jquery html javascript

本文链接：https://blog.youkuaiyun.com/qq_40116418/article/details/78833985

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

9 篇文章

订阅专栏

本文展示了一个使用 AngularJS 实现的基本用户管理界面案例。该案例包括用户信息的添加、显示、选择及删除功能，并通过 jQuery 进行 DOM 操作辅助实现。页面布局简洁明了，具备基本的输入字段与表格展示区域。

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

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>

		<script type="text/javascript" src="js/angular.min.js"></script>
		<script type="text/javascript" src="js/jquery-3.2.1.min.js"></script>

		<style type="text/css">
			* {
				margin: 0px auto;
			}
			
			.div1 {
				width: 700px;
				height: 170px;
				border: 1px solid black;
				text-align: center;
			}
			
			.div2 {
				width: 700px;
			}
			
			input {
				margin-top: 20px;
			}
			
			table {
				width: 700px;
				margin-top: 5px;
				text-align: center;
			}
		</style>
	</head>

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

		<div class="div1">
			用户名<input type="text" ng-model="in_name" id="in_name" /><span></span><br /> 密码
			<input type="text" ng-model="in_pswd" id="in_pswd" /><span></span><br />
			<input type="button" value="添加" ng-model="tianjia" ng-click="add()" />
		</div>
		<div class="div2">
			<div>
				<input type="button" value="批量删除" ng-model="piliang" ng-click="pl_shanchu()" />
				<input type="button" value="全选" id="quan" ng-click="qxuan()" />
				<input type="button" value="反选" id="fan" ng-click="fxuan()" />
			</div>
			<table border="1px" cellspacing="0px">
				<tr>
					<td></td>
					<td>用户名</td>
					<td>密码</td>
					<td>操作</td>

				</tr>
				<tr ng-repeat="u in unames">
					<td><input type="checkbox" ng-click="isXuan($index)" id="x" ng-model="xuan" /></td>
					<td>{{u.uname}}</td>
					<td>{{u.pswd}}</td>
					<td><input type="button" value="删除" ng-click="shanchu()" /></td>

				</tr>
			</table>

		</div>
		<script type="text/javascript">
			var mo = angular.module("myApp", []);
			mo.controller("myCtrl", function($scope) {

				//定义一个数组
				var arr = [{
					"flag": false,
					"uname": "张三",
					"pswd": 123456,
				}, {
					"flag": false,
					"uname": "李四",
					"pswd": 345345,
				}, {
					"flag": false,
					"uname": "王五",
					"pswd": 345345,
				}];
				$scope.unames = arr;

				//添加
				$scope.add = function() {
					var n = $("#in_name").val();
					var p = $("#in_pswd").val();

					//判断不为空
					if (n == "" && p == "") {
						alert("请输入用户名和密码");

					} else {
						//定义一个对象
						var d = {
							"uname": $scope.in_name,
							"pswd": $scope.in_pswd
						};
						$scope.unames.push(d);
					}

				}

				//改变复选框的状态
				$scope.isXuan = function($index) {
					arr[$index].isChecked = !arr[$index].isChecked;

				}

				//批量删除
				$scope.pl_shanchu = function() {
					for (var i = arr.length - 1; i >= 0; i--) {
						var x = arr[i].isChecked;
						if (x) {
							arr.splice(i, 1);
						}
					}
					$scope.unames = arr;
				}

				//全选
				var flag1 = true;
				$scope.qxuan = function() {

					var cb = $("input[type=checkbox]");
					for (var i = 0; i < cb.length; i++) {
						cb[i].checked = flag1;
						arr[i].isChecked = flag1;
					}
					flag1 = !flag1;
				}

				//反选的代码
				$scope.fxuan = function() {
						var cb = $("input[type=checkbox]");
						for (var i = 0; i < cb.length; i++) {
							cb[i].checked = !cb[i].checked;

							arr[i].isChecked = !arr[i].isChecked;
						}

					}
					//删除
				$scope.shanchu = function() {
					for (var i = arr.length - 1; i >= 0; i--) {
						var d = arr[i];

					}
					arr.splice(d, 1);

				}

			});
		</script>
	</body>

</html>