AngularJS（基本使用）动态添加表格数据（增删改查）

最新推荐文章于 2018-04-19 17:46:41 发布

来日未必方长

最新推荐文章于 2018-04-19 17:46:41 发布

阅读量7k

点赞数 2

文章标签： angularjs

本文链接：https://blog.csdn.net/mayn666/article/details/78754996

版权

<!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>
</head>
<body ng-app="myApp" ng-controller="myCtrl">
水果：<input type="text" ng-model="name" />
<input type="button" value="添加" ng-click="add()" />
<input type="button" value="批量删除" ng-click="plsc()" />

<table border="1px" cellspacing="0px" cellpadding="0px" width="200px" height="30px">
<tr>
<td><input type="checkbox" ng-click="qx()"/></td>
<td>水果名称</td>
<td>操作</td>
</tr>

<tr ng-repeat="g in goods">
<td><input type="checkbox" name="ck" ng-click="ck($index)"</td>
<td>{{g.name}}</td>
<td><input type="button" ng-click="dele($index)" value="删除"/></td>
</tr>

</table>

<script type="text/javascript">
var mb = angular.module("myApp",[]);//创建模板
mb.controller("myCtrl",function($scope){//创建控制

//定义数组
$scope.goods=[];
//添加的方法
$scope.add = function(){
//创建对象
var go = {"flag":false,"name":$scope.name}
//放进数组
$scope.goods.push(go);
}

//删除一行
$scope.dele =function($index){

$scope.goods.splice($index,1);
}

//改变每行chekbox的状态
$scope.ck = function($index){

$scope.goods[$index].flag=!$scope.goods[$index].flag
}
//批量删除
$scope.plsc = function(){
//反着遍历
for (var i = $scope.goods.length-1;i>=0;i--) {
if ($scope.goods[i].flag) {
$scope.goods.splice(i,1);
}
}
}

//全选
var qq = true;
$scope.qx = function(){
//获取属性
var ck = $("input[name=ck]")
for (var i=0;i<ck.length;i++) {

ck[i].checked=qq;

//给每个数组中的ck赋值
$scope.goods[i].flag=qq;
}

qq=!qq;
}

});

</script>

</body>
</html>

来日未必方长

关注

2
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
AngularJS（基本使用）动态添加表格数据（增删改查）

水果：水果名称操作{{g.name}}var mb = angular.module("myApp",[]);//创建模板mb.controller("myCtrl",function($scope){//创建控制//定义数组$scope.goods=[];//添加的方法$scope
复制链接

扫一扫