angularJS(七)动态增加行

1.点击新建一个窗口

 
<button type="button" class="btn btn-default" title="新建"data-toggle="modal" data-target="#editModal"ng-click="entity={};entity.specificationOptionList=[{}]"><i class="fa fa-file-o">i> 新建
button>

2.添加规格选项

<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"ng-model="entity.specification.specName" placeholder="规格名称">td>tr>table><div class="btn-group"><button type="button" ng-click="addSpecOpetion()"class="btn btn-default" title="新建"><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="specOption in entity.specificationOptionList"><td><input class="form-control"ng-model="specOption.optionName" placeholder="规格选项">td><td><input class="form-control"ng-model="specOption.orders" placeholder="排序">td><td>             <button type="button" ng-click="delSpecOpetion(index)"class="btn btn-default" title="删除"><i class="fa fa-trash-o">i> 删除button>td>tr>tbody>table>div><td>             <div class="modal-footer"><button class="btn btn-success" data-dismiss="modal"aria-hidden="true" ng-click="add()">保存button><button class="btn btn-default" data-dismiss="modal"aria-hidden="true">关闭button>div>

2.添加行的控制器方法

// 添加规格选项$scope.addSpecOpetion = function() {$scope.entity.specificationOptionList.push({});}

3，删除行的控制方法

// 删除规格选项$scope.delSpecOpetion = function(index) {$scope.entity.specificationOptionList.splice(index, 1);}

4、保存的方法

    // 添加规格的方法$scope.add = function() {//调用添加的服务var obj = specificationService.add($scope.entity);//结果显示obj.success(function(data) {// 添加成功if (data.success) {// 刷新列表$scope.reloadList();} else {// 添加失败alert(data.message);}})};

例如 添加一个屏幕尺寸的规格

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！