6.3.1 上传图片 (1)goodsController 编写代码
(2)修改图片上传窗口,调用上传方法,回显上传图片
<div class="modal-body">
<table class="table table-bordered table-striped">
<tr>
<td>颜色</td>
<td><input class="form-control" placeholder="颜色" ng-model="image_entity.color"> </td>
</tr>
<tr>
<td>商品图片</td>
<td>
<table>
<tr>
<td>
<input type="file" id="file" />
<button class="btn btn-primary" type="button"
ng-click="uploadFile()">
上传
</button>
</td>
<td>
<img src="{{image_entity.url}}" width="200px"
height="200px">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
(3)修改新建按钮
<
button
type="button"class="btnbtn-default"title="新建"data-target="#uploadModal"
data-toggle="modal"ng-click="image_entity={}"><i class="fafa-file-o"></i> 新 建
</button>
6.3.1 图片列表 (1)在 goodsController.js 增加方法
$scope.entity={goods:{},goodsDesc:{itemImages:[]}};//定义页面实体结构
//添加图片列表
$scope.add_image_entity=function(){
$scope.entity.goodsDesc.itemImages.push($scope.image_entity);
}
(2)修改上传窗口的保存按钮
<
button
class="btn
btn-success"
ng-click="add_image_entity()"
data-dismiss="modal"
aria-hidden="true">保存</button>
(3)遍历图片列表
<tr ng-repeat="pojo in entity.goodsDesc.itemImages">
<td>{{pojo.color}}</td>
<td><img alt="" src="{{pojo.url}}" width="100px" height="100px"></td>
<td><button type="button" class="btn btn-default" title="删除" ><i class="fa fa-trash-o"></i> 删除</button></td>
</tr>
6.3.1 移除图片 在 goodsController.js 增加代码
//列表中移除图片
$scope.remove_image_entity=function(index){
$scope.entity.goodsDesc.itemImages.splice(index,1);
} 修改列表中的删除按钮