angularJs增加行的操作
发布时间:2020-12-17 07:13:17 所属栏目:安全 来源:网络整理
导读:!-- 编辑窗口 --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 " b
<!-- 编辑窗口 --> <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就可以获取当前行的索引,来删除相应的行 (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |