angularJs实现动态增加输入框
摘要:首先,有一个这样的需求,就是说,我点击添加,会动态出现需要输入的输入框。我们需要定义一个对象,类似这种,
{spc:{},spctions:[]}
意思是spc对应的是一个对象,spctions对应的是一个列表。要实现动态插入的效果,我们只需要往spctions这个列表中插入一个空对应即可{},就是那么的简单。
最终需要插入的是两张表,相当于一对多的关系。这点要明白。当然 这里我们重点讲解 动态插入的原理和angular如何实现。
js代码
//增加规格选项行
$scope.addTableRow=function(){
$scope.entity.specificationOptionList.push({});
}
html代码
<tbody>
<tr ng-repeat="pojo in entity.specificationOptionList"> <td>
<input class="form-control" placeholder="规格选项" ng-model="pojo.optionName">
</td>
<td>
<input class="form-control" placeholder="排序" ng-model="pojo.orders">
</td>
<td>
<button type="button" class="btn btn-default" title="删除" ng-click="deleTableRow($index)" ><i class="fa fa-trash-o"></i> 删除</button>
</td>
</tr>
</tbody>
说一下需要注意的地方。这样写肯定不行,因为会报错
entity.specificationOptionList 未定义,所以 我们要初始化一下。最好在点击新增的按钮上初始化,因为。。。(自己试下就知道了)
在按钮上 添加 这行 即可
ng-click="entity={specificationOptionList:[]}" 删除的话,原理是传一个数组坐标,在数组中删除。获取遍历list的坐标是 $index 获取 ok 超级简单。 不懂留言 不得不说 双向绑定爽死 要是用jquery 搞死你 框架的魅力
angularJs实现动态增加输入框的更多相关文章
- 在Winform界面菜单中实现动态增加【最近使用的文件】菜单项
在我们一些和文件处理打交道的系统中,我们往往需要记录下最近使用的文件,这样方便用户快速打开之前浏览或者编辑过的文件,这种在很多软件上很常见,本文主要介绍在Winform界面菜单中实现[最近使用的文件] ...
- hdfs以及hbase动态增加和删除节点
一个知乎上的问题:Hbase的Region server和hadoop的datanode是否可以部署在一台服务器上?如果是的话,二者是否是一对一的关系?部署在同一台服务器上,可以减少数据跨网络传输的流 ...
- WPF datagrid 动态增加列
DataGrid动态增加列 <Window x:Class="WpfApplication1.MainWindow" xmlns="http://schemas.m ...
- ligerui_ligerTree_005_动态增加“树”节点
动态添加ligerTree节点:效果图: 源码地址:http://download.csdn.net/detail/poiuy1991719/8571255 <%@ page language= ...
- (二)Kafka动态增加Topic的副本(Replication)
(二)Kafka动态增加Topic的副本(Replication) 1. 查看topic的原来的副本分布 [hadoop@sdf-nimbus-perf ~]$ le-kafka-topics.sh ...
- ios专题 - objc runtime 动态增加属性
objective-c中,有类别可以在不修改源码的基础上增加方法:近排在看别人的开源代码时,发现还可以动态增加属性.而且是在运行时,太牛B了. 使用运行时库,必须要先引入 objc/runtime.h ...
- 【转】cocos2d-x 模仿计时器效果,动态增加分数——2013-08-25 16
http://www.cocos2dev.com/?p=90 游戏中要用到分数是动态增加的,而不是瞬间加上去的. bool HelloWorld::init() { if ( !CCLayer::in ...
- Hadoop 2.6.3动态增加/删除DataNode节点
假设集群操作系统均为:CentOS 6.7 x64 Hadoop版本为:2.6.3 一.动态增加DataNode 1.准备新的DataNode节点机器,配置SSH互信,可以直接复制已有DataNode ...
- Repeater 动态增加删除一行
文章参考:文章参考http://www.cnblogs.com/dataadapter/archive/2012/06/25/2562885.html 效果: 前台代码: <%@ Page La ...
随机推荐
- [CF1067D]Computer Game[凸包/斜率优化+倍增+矩阵乘法]
题意 你有 \(n\) 个任务,初始收益为 \(a\) ,共 \(t\) 轮游戏,每轮可以选择完成一个任务(可以做多次),完成之后可以给任意任务升级,升级之后的任务收益为 \(b\) ,每个任务还有完 ...
- mybatis源码-解析配置文件(二)之解析的流程
目录 1. 简介 2. 配置文件解析流程分析 2.1 调用 2.2 解析的目的 2.3 XML 解析流程 2.3.1 build(parser) 2.3.2 new XMLConfigBuilder( ...
- fabric-sdk-container v1.0-beta 新增支持多服务节点
HyperLedger/Fabric SDK Docker Image 该项目在github上的地址是:https://github.com/aberic/fabric-sdk-container ( ...
- 2-Twelfth Scrum Meeting20151212
任务安排 成员 今日完成 明日任务 闫昊 获取视频播放的进度 获取视频播放进度 唐彬 解决handler可能引起的内存泄露问题 阅读IOS代码+阅读上届网络核心代码 史烨轩 下载service开发 ...
- Linux内核的启动过程分析
秦鼎涛 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1000029000 一.实验目的及要求: 使用gdb跟踪调试内核从s ...
- http和https的加密方式
BS盛行的今天有点网络只是很必要啊,首先需要个网络抓包工具wireshark, http:http通过三次握手来通信,握手过程看图1 https:https = http + ssl(secure s ...
- freopen stdout 真的更快?
freopen stdout 真的更快? 在一次数独作业中,我发现大部分同学提交的代码中都使用 freopen 来将 stdout 重新指向目标文件进行文件输出操作.我感到十分好奇,关于 freope ...
- MongoDB给数据库创建用户
一.先以非授权的模式启动MongoDB 非授权: linux/Mac : mongod -f /mongodb/etc/mongo.conf windows : mongod --config c: ...
- Spark 实践——用决策树算法预测森林植被
本文基于<Spark 高级数据分析>第4章 用决策树算法预测森林植被集. 完整代码见 https://github.com/libaoquan95/aasPractice/tree/mas ...
- Python的三种格式化输出
今天刚学了python的三种格式化输出,以前没接触过这么有趣的输出方式,现在来分享一下. #!/user/bin/env python#coding:utf-8#三种格式化输出 #第一种格式化输出na ...