angularJs增加行的操作
<!-- 编辑窗口 --> <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就可以获取当前行的索引,来删除相应的行
笔记转移,由于在有道云的笔记转移,写的时间可能有点久,如果有错误的地方,请指正