使用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; charset=utf-8" />
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<title></title>
</head>
<body>
<div ng-app="myApp1" ng-controller="myCtrl1" 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" 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>
<button ng-click="count = count + 1">点我！</button>
<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>--%>
<script>
var app = angular.module('myApp1', []);
app.controller('myCtrl1', function ($scope) {
//$scope表示作用域对象，每个控制器都有自己的作用域对象
$scope.arrs = [
{ "productid": "FI-SW-01", "productname": "Koi" },
{ "productid": "K9-DL-01", "productname": "Dalmation" },
{ "productid": "RP-SN-01", "productname": "Rattlesnake" },
{ "productid": "RP-LI-02", "productname": "Iguana" },
{ "productid": "FL-DSH-01", "productname": "Manx" },
{ "productid": "FL-DLH-02", "productname": "Persian" },
{ "productid": "AV-CB-01", "productname": "Amazon Parrot" }
];
//定义一个空对象 , 用于更新和保存数据时临时存储
$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>
使用AngularJS 添加行修改、删除表格数据的更多相关文章
- Oracle批量删除表格数据
在开发阶段往Oracle数据库中多个表格中导入了许多测试数据,倘若一张张表执行"truncate table tablename"语句显得十分繁琐.在PL/SQL中可以用代码进行批 ...
- EXTJS4.2 内存中操作表格数据时，删除表格数据，行号不连续解决
需要重新刷新下表格的view => grid.view.refresh();
- elementUi使用dialog的进行信息的添加、删除表格数据时进行信息提示。删除或者添加成功的信息提示（SpringBoot+Vue+MybatisPlus）
文章目录 1.添加新用户,通过dialog的弹窗形式 1.1 添加的按钮 1.2 调用方法设置窗口可见 1.3 窗口代码 1.4 提交注册信息方法 1.5 使用mybatisPlus方法进行添加信息到 ...
- 打通前后端全栈开发node+vue进阶【课程学习系统项目实战详细讲解】(3)：用户添加/修改/删除 vue表格组件 vue分页组件
第三章 建议学习时间8小时 总项目预计10章 学习方式:详细阅读,并手动实现相关代码(如果没有node和vue基础,请学习前面的vue和node基础博客[共10章] 演示地址:后台:demo ...
- AngularJS进阶(十一)AngularJS实现表格数据的编辑,更新和删除
AngularJS实现表格数据的编辑,更新和删除 效果 实现 首先,我们先建立一些数据,当然你可以从你任何地方读出你的数据 var app = angular.module('plunker', [' ...
- easyui tree datagrid动态添加表头和表格数据，动态弹出框，修改和删除按钮
1.要有获取表头的URL和表格的URL 背景:点击树的一个节点,就加载一个表格,这个表格是动态的,表头和表格数据都是动态的 解决方案:需要两个URL,一个是获取表头的URL,一个是获取表格数据的URL ...
- 通过对表格数据的选择对input的value进行修改
通过对表格数据的选择对input的value进行修改 $(function(){ $("#tb_gys").datagrid({ url:'getGysinfoList.actio ...
- element-ui多层嵌套表格数据删除
很多表格都要一个移除的功能,所谓移除,就是前端把表格的数据删除,普通的表格删除很简单,调用数据的删除方法就行.但是当表格是多层的嵌套类型时,就不能再使用普通的删除方法了.下面介绍一种自己在项目中用的方 ...
- 利用jquery动态添加和删除表格的一行，并且保存单行数据
开发时遇到一个需求:要求要在页面的表格可以添加和删除一行,并能填写对应的数据后保存这一行数据. HTML代码 界面使用了freemarker框架,teams是后台传过来的list类型数据 <fo ...
随机推荐
- Android移动客户端性能测试浅谈——电量
本文由作者张迎贞授权网易云社区发布. APP性能测试除了需要监控PCU.内存占用.流量等,还需要获取APP的电量数据,测试在可接受范围内,避免APP出现过度消耗电量的现象.手机有很多硬件模块:CPU, ...
- vsftp -samba-autofs
摘要: 1.FTP文件传输协议,PAM可插拔认证模块,TFTP简单文件传输协议. 注意:iptables防火墙管理工具默认禁止了FTP传输协议的端口号 2.vsftpd服务程序三种认证模式?三种认证模 ...
- WordPress插件Social Warfare<=3.5.2 无需登录RCE漏洞
该漏洞只存在于Social Warfare插进的3.5.0.3.5.1和3.5.2版本中,其他版本不存在. 2019年3月21日插件作者紧急发布了3.5.3版本以修复高危的RCE漏洞,在<=3. ...
- codeforces 1093 题解
12.18 update:补充了 $ F $ 题的题解 A 题: 题目保证一定有解,就可以考虑用 $ 2 $ 和 $ 3 $ 来凑出这个数 $ n $ 如果 $ n $ 是偶数,我们用 $ n / 2 ...
- BZOJ 1248--游乐园(DFS&贪心)
1248: 游乐园Pleasure Ground Time Limit: 10 Sec Memory Limit: 128 MBSec Special JudgeSubmit: 6 Solved ...
- 【微信小程序】——实战开发之和风（含demo）
微信小程序之和风 序 凑了一把微信小程序的热闹!12月,小程序正式发布,很火,但随之而来的是各种冷水,唱衰之调随处可见.但作为一个小前端,岂能有新技术却弃之不顾之理,更何况是微信出品的?抱着学习和研究 ...
- UDP的优点
UDP优点 关于何时.发送什么数据的应用层控制更为精细 只需要应用层把数据传给UDP,UDP就把数据打包到网络层.对于TCP来说,存在一个拥塞控制机制,当链路变得拥塞时,会抑制TCP发送方,并造成数据 ...
- leetcode-201-数字范围按位与
题目描述: 给定范围 [m, n],其中 0 <= m <= n <= 2147483647,返回此范围内所有数字的按位与(包含 m, n 两端点). 示例 1: 输入: [5,7] ...
- C#-进制转化
(一)数制 计算机中采用的是二进制,因为二进制具有运算简单,易实现且可靠,为逻辑设计提供了有利的途径.节省设备等优点,为了便于描述,又常用八.十六进制作为二进制的缩写.一般计数都采用进位计数,其特点是 ...
- canvas+js绘制折线图
效果: 源码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="U ...