Java之品优购课程讲义

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    class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{image_entity.url}}"  width="200px"height="200px"></td></tr></table></td></tr></table></div>

（3）修改新建按钮

<buttontype="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）修改上传窗口的保存按钮

<buttonclass="btnbtn-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=""  class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="{{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);

}
修改列表中的删除按钮