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.

Did you declare $scope.attach? You can declare it using $scope.attach = []; — G_S, Apr 15 '16 at 05:41
No,no other error.here this `` will excuting and i am setting image like `$scope.dis_i="upload/"+array[i];` this but images are ther but coming. — satya, Apr 15 '16 at 05:51
Is attach[$index]!='' evaluating to false? Once check the value of attach[$index]!='' dis_{{$index}} and by printing it using {{attach[$index]!=''}} , dis_{{$index}}. Is ng-src getting set to correct value? Check this through developer tools — G_S, Apr 15 '16 at 06:02
@G_S : that line is coming but problem is in `ng-src="dis_{{$index}}"`. — satya, Apr 15 '16 at 06:04

score 1 · Accepted Answer · answered Apr 15 '16 at 06:12

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.

ok,i will try this but another use-case is if user is selecting image from local drive the first image tag should active.How that will execute. — satya, Apr 15 '16 at 06:16
What do you mean by the first image tag should be active? Is it the thumbnail one? Are you trying to show a thumbnail of the image selected by the user on his local disk before uploading it to the server? — Abderraouf El Gasser, Apr 15 '16 at 06:23
yes,you way is correct but let me to test another use cases. — satya, Apr 15 '16 at 06:23
this ` ` will active and other image tag will disable when user is selecting image from local drive. — satya, Apr 15 '16 at 06:24
I don't really understand your point, but if you're talking about showing a preview of the image the user selects before he uploads it to your server, then this question might help [link](http://stackoverflow.com/questions/14069421/show-an-image-preview-before-upload). It not angular code, but you could easily encapsulate it in a directive. — Abderraouf El Gasser, Apr 15 '16 at 06:27
ok,let me to clear.This images are my existing images which i am displaying.suppose some case user started to select image from his drive rather than the existing image to upload in that case my other image tag will active as i have written before. — satya, Apr 15 '16 at 06:30
Ok, I think I understood: the file input has **mul.image** as its _ng-model_ and the thumbnail image has also **mul.image** in the ngf-thumbnail and turns out this is a directive from the [ng-file-upload](https://github.com/danialfarid/ng-file-upload) component. So in this case can you try **ngf-src='mul.image'** instead of **ngf-thumbnail='mul.image'** — Abderraouf El Gasser, Apr 15 '16 at 06:46
Ok i solved that by set like this `$scope.onFileSelect1=function(index){ $scope.mulImage[index]['filename']=''; }` — satya, Apr 15 '16 at 06:58
Actualy now with your last comment I understand what you were asking and then yes, it's the good solution to use to show the thumbnail of the uploaded image instead of the original image. To simplify the code you could write: `$scope.onFileSelect1 = function(image) { image.filename = ''; }` and in the html `ngf-select="onFileSelect1(mul)"` — Abderraouf El Gasser, Apr 15 '16 at 07:18

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

1 Answers1