<!-- 编辑窗口 --><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,1); ???}具体思路:是由于在里面是一个循环体绑定了数据,向数据中添加一个空数据,所以就可以进行了,就可以添加一行了
??<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增加行的操作
原文地址：https://www.cnblogs.com/xiufengchen/p/10369533.html