Java之品优购课程讲义_day05（11）

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);

}
修改列表中的删除按钮