Angular JS 之对表格进行操作

最新推荐文章于 2025-06-19 14:42:06 发布

一坨英俊的屎

最新推荐文章于 2025-06-19 14:42:06 发布

阅读量1.7k

点赞数 1

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/wq857260622/article/details/78490825

本文介绍如何使用AngularJS实现表格的基本操作，包括初始化表格数据、设置删除按钮点击事件等。通过示例代码展示AngularJS双向绑定的特点及如何更新视图。

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

使用 Angular 对表格进行操作

1、导入所需要的包

2、向表格中添加数据

3、设置事件对表格进行操作

示例图：

（如图，点击删除按钮删除表格中的一行）

代码如下：

<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title>AngularJS之对表格进行操作</title>
		
		<!--
			导包
		-->
		<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>

	</head>

	<!--
		AngularJS对应的指令
	-->
	<body ng-app="myApp" ng-controller="myCtrl">

		<table border="1px" cellspacing="0" cellpadding="1">

			<tr>
				<td>姓名</td>
				<td>性别</td>
				<td>删除</td>
			</tr>

			<tr ng-repeat="people in person">
				<td>{{people.name}}</td>
				<td>{{people.sex}}</td>
				<td><input type="button" value="删除" ng-click="dele($index)" /></td>
			</tr>

		</table>

		<script type="text/javascript">
			var modul = angular.module("myApp", []);

			modul.controller("myCtrl", function($scope) {

				//将数组初始化出来
				$scope.person = [{
					"name": "张三",
					"sex": "男"
				}, {
					"name": "李四",
					"sex": "女"
				}, {
					"name": "赵六",
					"sex": "男"
				}];

				//删除按钮的点击事件
				$scope.dele = function($index) {

					/**
					 * 因为Angular是双向绑定的，所以只要视图里面的数据改变，视图就会自己改变
					 * 
					 * 在这里我们只需要将数组里面的数据删除就可以了
					 */
					$scope.person.splice($index, 1);

				}

			});
		</script>

	</body>

</html>