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就可以获取当前行的索引,来删除相应的行

posted @ 2019-02-13 14:07  菩提树下的丁春秋  阅读(876)  评论(0编辑  收藏  举报