zoukankan      html  css  js  c++  java
  • 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就可以获取当前行的索引,来删除相应的行

  • 相关阅读:
    Eclipse下载
    RTT之AT命令组件
    RTT之shell
    RTT之内存管理及异常中断
    单片机的图形UI
    RTT学习
    RTT学习之线程管理
    C++学习笔记:
    运放
    关于KEIL下的图形化显示和输出问题
  • 原文地址:https://www.cnblogs.com/xiufengchen/p/10369533.html
Copyright © 2011-2022 走看看