黑马程序员技术交流社区

标题: 【郑州校区】品优购电商系统开发第 5 章 十 [打印本页]

---

作者: 我是楠楠    时间: 2020-5-21 10:50
标题: 【郑州校区】品优购电商系统开发第 5 章 十

【郑州校区】品优购电商系统开发第 5 章 十

（3）修改新建按钮

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

<button type="button" class="btn btn-default" title="新建" data-target="#uploadModal"

data-toggle="modal" ng-click="image_entity={}" ><i class="fa fa-file-o"></i> 新 建

</button> 

6.3.3 图片列表
（1）在 goodsController.js 增加方法

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

$scope.entity={goods:{},goodsDesc:{itemImages:[]}};//定义页面实体结构

//添加图片列表

$scope.add_image_entity=function(){

$scope.entity.goodsDesc.itemImages.push($scope.image_entity);

} 

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

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

 <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.4 移除图片
在 goodsController.js 增加代码

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

 //列表中移除图片

$scope.remove_image_entity=function(index){

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

}

修改列表中的删除按钮

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

<button

type="button"

class="btn btn-default"

title="

删 除

"

ng-click="remove_image_entity($index)"><i class="fa fa-trash-o"></i> 删除</button>

---

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

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