1.点击新建一个窗口
<!--
entity={} :清空数据,
entity.specificationOptionList=[{}]:为规格选项设置一个空表格
-->
<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>
<!-- 规格选项卡
2.ng-click="addSpecOpetion()":点击调用addSpecOpetion()方法添加规格选项
-->
<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>
<!--
3. 1)通过ng-repeat循环便利选项卡
ng-repeat="specOption in entity.specificationOptionList"
这里循环便利规格选项卡
2)通过ng-model将用户输入的数据绑定到specOption对象中
ng-model="specOption.optionName" placeholder="规格选项"
ng-model="specOption.orders" placeholder="排序"
-->
<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>
<!--
5.ng-click="delSpecOpetion(index)":点击删除该索引的规格选项
-->
<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>
<!--
4.ng-click="add()":点击保存数据
-->
<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);
}
})
};
例如 添加一个屏幕尺寸的规格