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);
}
修改列表中的删除按钮
點擊查看更多內(nèi)容
為 TA 點贊
評論
評論
共同學習,寫下你的評論
評論加載中...
作者其他優(yōu)質(zhì)文章
正在加載中
感謝您的支持,我會繼續(xù)努力的~
掃碼打賞,你說多少就多少
贊賞金額會直接到老師賬戶
支付方式
打開微信掃一掃,即可進行掃碼打賞哦