码迷,mamicode.com
首页 > Web开发 > 详细

angularJs增加行的操作

时间:2019-02-13 14:22:36      阅读:211      评论:0      收藏:0      [点我收藏+]

标签:fun   dal   增加   dialog   操作   The   bin   cli   名称   

<!-- 编辑窗口 -->
<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增加行的操作

标签:fun   dal   增加   dialog   操作   The   bin   cli   名称   

原文地址:https://www.cnblogs.com/xiufengchen/p/10369533.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!