Question

我需要一些帮助。我需要显示多个图像，当用户也会选择它将推入数组的图像。我在下面解释我的代码。

<div class="input-group bmargindiv1 col-md-12" ng-repeat="mul in mulImage">
<span class="input-group-addon ndrftextwidth text-right" style="width:180px">Image{{$index+1}}:</span>
<div>
<div ng-class="{'myError': billdata.upload_{{$index}}.$touched && billdata.upload_{{$index}}.$invalid }">
 <input type="file" class="filestyle form-control" data-size="lg" name="upload_{{$index}}" id="bannerimage_{{$index}}"  ng-model="mul.image" ngf-pattern="'image/*'" accept="image/*" ngf-max-size="2MB" ngf-min-height="400" ngf-resize="{width: 400, height:400}"  ngf-select="onFileSelect1('upload_{{$index}}',mul.image);">
<div style="clear:both;"></div>
 <input type="text" id="hidn_{{$index}}" ng-model="attach_{{$index}}" style="display:none" />
 </div>
 </div>
<span class="input-group-btn" ng-show="mulImage.length>0">
 <img ngf-thumbnail="mul.image" name="pro" border="0" style="width:32px; height:32px; border:#808080 1px solid;">
 <input type="button" class="btn btn-success" name="plus" id="plus" value="+" ng-click="addNewImageRow(mulImage);" ng-show="$last"> <input type="button" class="btn btn-danger" name="minus" id="minus" value="-"  ng-show="mulImage.length>1" ng-click="deleteNewImageRow(mulImage,$index);">

 </span>
</div>

 </div>

在这里，我使用ng-file-upload通过plus按钮上传多个图像。当用户从本地驱动器中选择图像时，图像正在显示。但是还有一个案例我有一些图像名称我需要首先显示这些名称，如果用户选择更多名称，也可以。

 $scope.mulImage=[];
   $scope.mulImage.push({'image':null});
   $scope.addNewImageRow=function(mulImage){
       mulImage.push({'image':null});
   }
   $scope.deleteNewImageRow=function(mulImage,index){
       mulImage.splice(index,1);
       console.log('file',$scope.mulImage[0]['image'].name);
   }

以上是我的控制器端代码。

var arr=["10lx18i3ciyhkt9_de021b24.jpg", "ajqgis4v1wi2j4i_a6d6c48a.jpg", "7pxknunjop9cnmi_silu nana.jpg"]

假设我之前有上面的图像。当页面刷新时，前3个图像将显示给用户，如upload/10lx18i3ciyhkt9_de021b24.jpg和3个图像行也将创建。如果用户想要添加/删除它也可以请帮助我。

如何使用Angular.js在图像标签内显示图像

0 个答案: