黑马程序员技术交流社区

标题: 【郑州校区】Java之品优购课程讲义_day05（11） [打印本页]

---

作者: 谷粒姐姐    时间: 2018-8-20 11:32
标题: 【郑州校区】Java之品优购课程讲义_day05（11）

6.3.1 上传图片

（1）goodsController 编写代码

（2）修改图片上传窗口，调用上传方法，回显上传图片

[AppleScript] 纯文本查看 复制代码

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

[AppleScript] 纯文本查看 复制代码

<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 增加方法

[AppleScript] 纯文本查看 复制代码

$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）遍历图片列表

[AppleScript] 纯文本查看 复制代码

<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 增加代码

[AppleScript] 纯文本查看 复制代码

//列表中移除图片



$scope.remove_image_entity=function(index){



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



}

修改列表中的删除按钮

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2