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

Question

I need one help.I am getting the following error while assigning value to model using angular.js.

Error:

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

I am explaining my code below.

 <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>

Here i have multiple image option.I have some images i need to display those into image tag but here i have two condition if user is selecting image from local disc then first image tag will active and when there is existing image other image tag will active.i am explaining my controller code below.

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 variable giving the output like this ['abc.jpg','def.jpg'].here i need to set image name to this input <input type="text" id="hidn_{{$index}}" ng-model="attach[$index]" style="display:none" /> field but getting error at this $scope.attach[i]=array[i]; line.Please help me to resolve this error so that code should work as per my requirement.

Answer 1

In case you don't need the attach array in another place, you can simplify your code and make it work with these changes:

First, remove the attach array and the dis_i variable (which, by the way, cannot work because it would contain the url of the last image, as at each step of the for loop you set its value to array[i] and not each image in turn as you expect) and simply set the filename into the mulImage array's items:

    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]});
    }

Then edit your html to use the filename property of the mul object (coming from the array mulImage you are looping through):

<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> 

This should solve your issue.

PS: I didn't remove the ng-show="mulImage.length>0" in your last span, but it's unnecessary as you'd never reach that code if mulImage doesn't contain anything because this span is inside the ng-repeat block.