Dynamic add image

ionic-v1
#1

Hi there

I’m new to ionic and need help. I’m trying to load images dynamically through the .controller. It populates a ion-slide box with the images. So far the images are pre-loaded i.e

$scope.aImages = [{
‘src’: ‘http://ionicframework.com/img/ionic-logo-blog.png’,
‘msg’: ‘Swipe me to the left. Tap/click to close’
}, {
‘src’: ‘http://ionicframework.com/img/ionic_logo.svg’,
‘msg’: ‘’
}, {
‘src’: ‘http://ionicframework.com/img/homepage/phones-weather-demo@2x.png’,
‘msg’: ‘’
}];

I don’t want that because its sort of ‘static’ in a way. My question is how do I take a tag src and populate it to the .controller $scope?

Any help would be highly appreciated. Thanks

#2

So you have your images in an array which is the first part.

The next part is using ng-repeat on the aImages in your slidebox element.

Once you get that working, you can then add items to your alImages array but just doing:

aImages.push(NEW_IMAGE_OBJECT);

Once you push an image to the array, you need to tell slidebox to update, which basically rerenders the slidebox with a new slide. You can do so by calling:

$ionicSlideBoxDelegate.update();

I recommend giving your slidebox element a delegate handle by adding this attribute to your slidebox element:

delegate-handle=‘imageSlideBox’

Then you can call it by doing

$ionicSlideBoxDelegate.$getByHandle('imageSlideBox').update()

So now if you have multiple slideboxes, you can choose which one to update.

Heres some more info on slidebox:

http://ionicframework.com/docs/api/service/$ionicSlideBoxDelegate/

Good luck and let me know if you need any help or clarity.

#3

Hi Thank you for your reply.

I understand how to do that.

My question is how do I take an image tag src i.e ‘base64blahblah’ from HTML page and populate it to the array on button click.