HI i am displaying images as giving below from a son object. in that son object i have name for each image i need to display the name of images under the corresponding.
<ion-scroll direction="x" class="item row" id="galleryline1">
<div class="first_row" id="firstrow">
<div>
<img ng-repeat="image in allimages" ng-src="{{image.src}}" ng-click="showImages(image.title)" class="image-list-thumb"/>
</div>
</div>
</ion-scroll>
Just add the expression to display name of image inside the ng-repeat.
<ion-scroll direction="x" class="item row" id="galleryline1">
<div class="first_row" id="firstrow">
<div>
<div ng-repeat="image in allimages">
<img ng-src="{{image.src}}" ng-click="showImages(image.title)" class="image-list-thumb"/><br />
<span>{{image.name}}</span>
</div>
</div>
</div>
</ion-scroll>
Adjust your HTML like below:
<ion-scroll direction="x" class="item row" id="galleryline1">
<div class="first_row" id="firstrow">
<div ng-repeat="image in allimages">
<img ng-src="{{image.src}}" ng-click="showImages(image.title)" class="image-list-thumb"/>
<h4 ng-bind="image.name"></h4>
</div>
</div>
</ion-scroll>
Your angular template is constructed wrong.
You need to perform the angular image iteration on the parent element. Like so:
<ion-scroll direction="x" class="item row" id="galleryline1">
<div class="first_row" id="firstrow">
<div ng-repeat="image in allimages">
<img ng-src="{{image.src}}" ng-click="showImages(image.title)" class="image-list-thumb"/>
</div>
</div>
</ion-scroll>
Please, try this one:
<ion-scroll direction="x" class="item row" id="galleryline1">
<div class="first_row" id="firstrow">
<div ng-repeat="image in allimages">
<img ng-src="{{image.src}}" ng-click="showImages(image.title)" class="image-list-thumb"/>
<h3 ng-bind="image.name"></h3>
</div>
</div>
</ion-scroll>
something like that?
<ion-scroll direction="x" class="item row" id="galleryline1">
<div class="first_row" id="firstrow">
<div ng-repeat-start="image in allimages" class="image-list-thumb-img">
<img ng-src="{{image.src}}" ng-click="showImages(image.title)"/>
</div>
<div ng-repeat-end class="image-list-thumb-note">{{image.name}}</div>
</div>
</ion-scroll>