使用angularjs完成增删单元格需求

最新推荐文章于 2022-11-11 14:24:03 发布

原创最新推荐文章于 2022-11-11 14:24:03 发布 · 171 阅读

1 ·

CC 4.0 BY-SA版权

后端专栏收录该内容

11 篇文章

订阅专栏

博客围绕规格选项编辑窗口展开，需求是点击“新增规格选项”后下方出现带删除按钮的 input 行，点击可删除。还介绍了点击事件中“entity={specificationOptionList:[]}”的思路，即把 specificationOptionList 对象存到 entity 中并初始化，后端可将其包装为新实体类。

需求：此为编辑窗口，要求点击“新增规格选项后”，下方出现一行input，input中有删除按钮，点击可删除

此为规格编辑按钮：
新建

点击事件中"entity={specificationOptionList:[]}"的思路：
因为要传多个对象到后台，所以将specificationOptionList对象存到entity对象中并初始化俩个对象

此为增删规格选项窗口

新增规格选项

         </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>

js：

//增加规格选项行
$scope.addTableRow=function(){
	$scope.entity.specificationOptionList.push({});			
}
entity.specificationOptionList中元素用ng-model完成双向绑定并遍历元素，push方法存入集合元素


//删除规格选项行
$scope.deleTableRow=function(index){
	$scope.entity.specificationOptionList.splice(index,1);
	//用splice方法删除当前索引的集合元素
}
删除主要是找到当前input在集合中索引，用$index获取当前索引

而后端可以将其包装为新的由俩个对象组成的实体类