使用 Angular.js 为模型名称赋值时出错

Question

我需要一个 help.I 在使用 angular.js 为模型赋值时出现以下错误。

错误：

angularjs.js:107 TypeError: Cannot set property '0' of undefined

我在下面解释我的代码。

 <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;" ng-if="mul.image !=null"><img ng-src="dis_{{$index}}" name="pro" border="0" style="width:32px; height:32px; border:#808080 1px solid;" ng-if="attach[$index]!=''">
<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>

这里我有多个图像 option.I 有一些图像我需要将它们显示到图像标签中但是这里我有两个条件如果用户从本地磁盘选择图像然后第一个图像标签将激活并且当有现有图像其他图像标签将 active.i 在下面解释我的控制器代码。

var multiImage=response.data[0].multiple_image;
            var array=multiImage.split(",");
            for(var i=0;i<array.length;i++){
                 $scope.mulImage.push({'image':null});
                 $scope.attach[i]=array[i];
                 $scope.dis_i="upload/"+array[i];
}

multiImage 变量给出这样的输出 ['abc.jpg','def.jpg']。这里我需要将图像名称设置到这个输入 <input type="text" id="hidn_{{$index}}" ng-model="attach[$index]" style="display:none" /> 字段但是在这个 $scope.attach[i]=array[i]; line.Please 帮我解决这个错误，这样代码就可以按照我的要求工作了。

Answer 1

如果您不需要在其他地方添加 attach 数组，您可以简化代码并使其适用于以下更改：

首先，删除 attach 数组和 dis_i 变量（顺便说一句，它不能工作，因为它将包含最后一张图像的 url，因为在 for 循环的每一步中，您都将其值设置为 array[i] 而不是像您期望的那样依次设置每个图像）并简单地将文件名设置为 mulImage 数组的项目：

    var multiImage=response.data[0].multiple_image;
    var array=multiImage.split(",");
    $scope.mulImage = [];
    for(var i=0;i<array.length;i++){
      $scope.mulImage.push({'image':null, 'filename':array[i]});
    }

然后编辑 html 以使用 mul 对象的 filename 属性（来自array mulImage 你正在循环):

<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="mul.filename" 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;" ng-if="mul.image !=null"><img ng-src="upload/{{mul.filename}}" name="pro" border="0" style="width:32px; height:32px; border:#808080 1px solid;" ng-if="mul.filename!=''">
    <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>

这应该可以解决您的问题。

PS：我没有删除你上一个跨度中的 ng-show="mulImage.length>0"，但这是不必要的，因为你永远无法到达该代码如果 mulImage 不包含任何内容，因为此跨度在 ng-repeat 块内。

使用 Angular.js 为模型名称赋值时出错

Getting error while assign value into model name using Angular.js

javascript

angularjs

ng-file-upload