<!-- 编辑窗口 -->
<div class="modal fade" id="editModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" >
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">规格编辑</h3>
</div>
<div class="modal-body"> <table class="table table-bordered table-striped" width="800px">
<tr>
<td>规格名称</td>
<td><input class="form-control" placeholder="规格名称" ng-model="entity.specification.specName"> </td>
</tr>
</table> <!-- 规格选项 -->
<div class="btn-group">
<button type="button" class="btn btn-default" title="新建" ng-click="addTableRow()"><i class="fa fa-file-o"></i> 新增规格选项</button> </div> <table class="table table-bordered table-striped table-hover dataTable">
<thead>
<tr> <th class="sorting">规格选项</th>
<th class="sorting">排序</th>
<th class="sorting">操作</th>
</thead>
<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>
</table> </div>
    //$scope.entity={specificationOptionList:[]};

    //增加规格选项行
$scope.addTableRow=function(){
$scope.entity.specificationOptionList.push({});
} //删除规格选项行
$scope.deleTableRow=function(index){
$scope.entity.specificationOptionList.splice(index,);
}

具体思路:是由于在里面是一个循环体绑定了数据,向数据中添加一个空数据,所以就可以进行了,就可以添加一行了

   <div class="pull-left">
<div class="form-group form-inline">
<div class="btn-group">
<button type="button" class="btn btn-default" title="新建" data-toggle="modal" data-target="#editModal" ng-click="entity={specificationOptionList:[]}"><i class="fa fa-file-o"></i> 新建</button>
<button type="button" class="btn btn-default" title="删除" ng-click="dele()"><i class="fa fa-trash-o"></i> 删除</button> <button type="button" class="btn btn-default" title="刷新" onclick="window.location.reload();"><i class="fa fa-refresh"></i> 刷新</button>
</div>
</div>
</div>

使用$index就可以获取当前行的索引,来删除相应的行

angularJs增加行的操作的更多相关文章

  1. DataTable数据类型的一些操作 增加行、插入行、修改数据、修改列名、修改列顺序、计算、选取或删除行(列)、排序、某列distinct值 等

    Datatable 这个数据类型在C#中涉及到对数据库读取时的用处还是挺大的,最近在处理一个报表开发时,一开始把所有的操作都放在sql 上面来做,就是我需要什么样的数据我就query出什么,但是这样其 ...

  2. poi读取Excel模板并修改模板内容与动态的增加行

    有时候我们可能遇到相当复杂的excel,比如表头的合并等操作,一种简单的方式就是直接代码合并(浪费时间),另一种就是写好模板,动态的向模板中增加行和修改指定单元格数据. 1.一个简单的根据模板shee ...

  3. js 动态增加行删除行

    <body> <table id="tableID" border="1" align="center" width=&q ...

  4. mongoVUE的增删改查操作使用说明

    mongoVUE的增删改查操作使用说明 一. 查询 1. 精确查询 1)右键点击集合名,再左键点击Find 或者直接点击工具栏上的Find 2)查询界面,包括四个区域 {Find}区,查询条件格式{& ...

  5. (转)SQLite数据库增删改查操作

    原文:http://www.cnblogs.com/linjiqin/archive/2011/05/26/2059182.html SQLite数据库增删改查操作 一.使用嵌入式关系型SQLite数 ...

  6. jquery plugins —— datatables 增加行号

    table = $("#Table").DataTable({ "rowCallback": function (row, data, dataIndex) { ...

  7. 详谈easyui datagrid增删改查操作

    转自:http://blog.csdn.net/abauch_d/article/details/7734395 前几天我把easyui dadtagrid的增删改查的实现代码贴了出来,发现访问量达到 ...

  8. Python教程:连接数据库,对数据进行增删改查操作

    各位志同道合的同仁可以点击上方关注↑↑↑↑↑↑ 本教程致力于程序员快速掌握Python语言编程. 本文章内容是基于上次课程Python教程:操作数据库,MySql的安装详解 和python基础知识之上 ...

  9. PHP程序中使用PDO对象实现对数据库的增删改查操作的示例代码

    PHP程序中使用PDO对象实现对数据库的增删改查操作(PHP+smarty) dbconn.php <?php //------------------------使用PDO方式连接数据库文件- ...

随机推荐

  1. hibernate 单元测试

     单元测试 测试 dao service action package com.kaishengit.test; import org.hibernate.Session; import com.ka ...

  2. jQuery实现页内锚点平滑跳转

    当页面内容长多,导致页面高度过高或过宽是,浏览起来就有点费劲,不过使用了锚点平滑跳转效果可以实现页面的跳转,从而加快速浏览想要浏览的模块.具体做法如下: 首先是菜单(锚点)的写法 <a href ...

  3. Ok6410裸机驱动学习(三)C语言内嵌汇编

    1.C语言内嵌汇编使用方法 C内嵌汇编以关键字”_asm_或asm开始,下辖4个部分,各部分之间用“:”分开,第一部分是必须写的,后面3个部分可以省略,但是分号:不能省略 优化后的代码 2.汇编程序框 ...

  4. ffmpeg一揽子

    avformat_alloc_output_context2().在基于FFmpeg的视音频编码器程序中,该函数通常是第一个调用的函数(除了组件注册函数av_register_all()).avfor ...

  5. springboot启动异常java.lang.NoSuchFieldError: DEFAULT_INCOMPATIBLE_IMPROVEMENTS

    解决办法一 yml或者Properties文件中配置 spring.freemarker.check-template-location=false 解决办法二 @SpringBootApplicat ...

  6. 今天出现编码出现了No suitable driver found for jdbc

    出现这样的情况,一般有四种原因: 一:连接URL格式出现了问题(Connection conn=DriverManager.getConnection("jdbc:mysql://local ...

  7. JavaScript 书籍推荐(转)

    作者:宋学彦链接:https://www.zhihu.com/question/19713563/answer/23068003来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明 ...

  8. docker学习(1)docker的安装

    原文地址:http://blog.csdn.net/we_shell/article/details/38352837 1. 前言 Docker的英文本意是“搬运工”,在程序员的世界里,Docker搬 ...

  9. Zbar算法流程介绍

    博客转载自:https://blog.csdn.net/sunflower_boy/article/details/50783179 zbar算法是现在网上开源的条形码,二维码检测算法,算法可识别大部 ...

  10. Linux minicom命令

    一.简介 minicom是Linux下的超级终端,与Windows下的超级终端功能相似,可以通过串口控制外部的硬件设备,可以用于管理和控制嵌入式设备 二.安装 1)yum安装 yum install ...