javascript - 使用 Angular.js 将值分配给模型名称时出现错误

Question

我需要帮助。使用 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>

这里我有多个图像选项。我有一些图像需要将它们显示到图像标签中，但是这里我有两个条件，如果用户从本地磁盘选择图像，则第一个图像标签将激活，并且当存在现有图像时其他图像标签将处于事件状态。我将在下面解释我的 Controller 代码。

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.请帮助我解决此错误，以便代码可以按照我的要求工作。

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 属性(来自您正在循环的数组 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 block 内。