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>

这里我有多个图像选项。我有一些图像我需要将它们显示到图像标签中但是在这里我有两个条件，如果用户从本地光盘中选择图像然后第一个图像标签将激活，当有现有图像时其他图像标签将激活。我正在解释我的控制器代码。

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];行时出错。请帮助我来解决这个错误，以便代码可以按照我的要求工作。

Answer 1

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

首先，删除附加数组和 dis_i 变量（顺便说一下，它不能正常工作，因为它包含最后一个图像的网址，如每个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 对象的文件名属性（来自您正在循环的数组 mulImage ）：< / p>

<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＆gt; 0”，但这是不必要的，因为如果mulImage没有，你就永远不会达到那个代码包含任何内容，因为此跨度位于ng-repeat块内。

使用Angular.js将值分配到模型名称时获取错误

1 个答案: