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

} 修改列表中的删除按钮