使用 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>版权声明：本文为wq857260622原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接和本声明。