0

i am getting the following error while trying to display the validation message using Angular.js.

Error:

angularjs.js:107 Error: [$parse:syntax] http://errors.angularjs.org/1.4.6/$parse/syntax?p0=%7B&p1=is%20an%20unexpected%20token&p2=17&p3=billdata.upload_%7B%7BNaNndex%7D%7D.%24touched&p4=%7B%7B%index%7D%7D.%24touched

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>
</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;">
 <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 class="help-block" ng-messages="billdata.upload_{{$index}}.$error" ng-if="billdata.upload_{{$index}}.$touched">
 <p ng-message="maxSize" style="color:#F00;">File is too large.Max size is 2 mb.</p>
 <p ng-message="minHeight" style="color:#F00;">Minimum height should be 400px</p>
 </div>
</div>

Here when i am adding this validation message <div class="help-block" ng-messages="billdata.upload_{{$index}}.$error" ng-if="billdata.upload_{{$index}}.$touched"> its throwing the above error.Please help me to resolve this error.

satya
  • 3,508
  • 11
  • 50
  • 130
  • statements in ng-if are treated as javascript, so {{$index}} is not replaced by the index. – ayushgp Apr 15 '16 at 13:22
  • So,what should be the solution. – satya Apr 15 '16 at 13:24
  • You can change the `ng-if="billdata.upload_{{$index}}.$touched"` to `ng-if="billdata['upload_'+this.$index].$touched"`. and same changes to ng-messages. – ayushgp Apr 15 '16 at 13:31
  • thanks i resolved that. – satya Apr 15 '16 at 13:32
  • Please post how you did resolve that. If you solved with the help of a comment, state it and give credit to the author. If you solved in different way, write it down. – MarcoS Apr 15 '16 at 13:35

2 Answers2

0

Instead of "billdata.upload_{{$index}}.$error, I would use "billdata['upload_' + $index].$error

MarcoS
  • 17,323
  • 24
  • 96
  • 174
0

You can change the ng-if="billdata.upload_{{$index}}.$touched" to ng-if="billdata['upload_'+this.$index].$touched". and same changes to ng-messages

ayushgp
  • 4,891
  • 8
  • 40
  • 75