加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 综合聚焦 > 服务器 > 安全 > 正文

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

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读