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

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



}

 

<

button

class="btn

btn-success"

ng-click="add_image_entity()"

data-dismiss="modal"

（2）修改上传窗口的保存按钮

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>

在 goodsController.js 增加代码6.3.1 移除图片

//列表中移除图片

 

$scope.remove_image_entity=function(index){

 

$scope.entity.goodsDesc.itemImages.splice(index,1);

 

}

修改列表中的删除按钮