使用AngularJS 添加行修改、删除表格数据

最新推荐文章于 2019-03-15 22:23:31 发布

weixin_30399055

最新推荐文章于 2019-03-15 22:23:31 发布

阅读量201

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/yyzyou/p/9623033.html

版权

https://blog.csdn.net/xin_x1n/article/details/53070144

<p>循环对象:</p>
<table ng-repeat="y in names">
<tr>
<td>
<input value="{{ y.name }}" />
</td>
<td>{{ y.country }}</td>
<td>
<input type="button" ng-click="count = count + 1" value="{{ y.name + ', ' + y.country }}" /></td>
</tr>
</table>
<table>
<tr>
<th>id</th>
<th>productname</th>
<th>productid</th>
<th>
<input ng-click="add()" value="add" /></th>
</tr>
<tbody ng-repeat="z in arrs">
<tr>
<td>{{$index}}</td>
<td>
<input ng-model="z.productid" value="{{z.productid}}"></td>
<td>
<input ng-model="z.productname" value="{{z.productname}}"></td>
<td>
<input ng-click="updata($index)" value="update" /></td>
</tr>
</tbody>
</table>

<p>{{ count }}</p>

</div>

<%--<div ng-app="myApp2" ng-init="names=[
{name:'Jani',country:'Norway'},
{name:'Hege',country:'Sweden'},
{name:'Kai',country:'Denmark'}]">

<p>循环对象:</p>
<table ng-repeat="y in names">
<tr>
<td>
<input value="{{ y.name }}" />
</td>
<td>{{ y.country }}</td>
<td>
<input type="button" /></td>
</tr>
</table>

<ul>
<li ng-repeat="x in names">{{ x.name + ', ' + x.country }}</li>
</ul>

</div>--%>

//定义一个空对象 , 用于更新和保存数据时临时存储
$scope.prod = {};

//定义一个全局变量idx , 用于存储选中行的索引，方便执行保存操作时保存数据
var idx = -1;

//定义一个单击修改按钮时触发的事件，用于单击后弹出模块窗口用于修改数据
$scope.updata = function ($index) {

显示bootstrap中的模块窗口
//$('#modal-1').modal('show');

//将选中行的数据绑定到临时对象prod中，在下面的模态窗口中展示出来
$scope.prod.productid = $scope.arrs[$index].productid;
$scope.prod.productname = $scope.arrs[$index].productname;
//选中行的索引赋值给全局变量idx
idx = $index;
alert($scope.prod.productid)
};

//定义一个单机保存按钮时触发的事件,
$scope.save = function () {
//将修改后的值赋给数组
$scope.arrs[idx].productid = $scope.prod.productid;
$scope.arrs[idx].productname = $scope.prod.productname;
//关闭模块窗口
//$('#modal-1').modal('hide');
}
$scope.add = function () {
$scope.arrs.push({ "productid": "2222", "productname": "33333t" })
}

$scope.count = 0;
});
</script>

</body>
</html>

转载于:https://www.cnblogs.com/yyzyou/p/9623033.html

weixin_30399055

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用AngularJS 添加行修改、删除表格数据

https://blog.csdn.net/xin_x1n/article/details/53070144<html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <meta http-equiv="Content-Type" content="text/html; charse...
复制链接

扫一扫