I am facing a challenge in pushing images into an array. I want to capture photos of various items or multiple pictures of one item, but the implementation seems tricky.
Currently, only a single image is displayed from the first line:
<img ng-show="imgURI !== undefined" ng-src="{{imgURI}}" style="text-align: center">
However, when using ng-repeat, multiple images are not being displayed as intended.
I believe my problems lie in:
- Identifying what is incorrect with my ng-repeat?
- Ensuring that the images are correctly stored within the array?
HTML
<button class="button button-full button-assertive" ng-click="takePhoto()">
Take Photo
</button>
<img ng-show="imgURI !== undefined" ng-src="{{imgURI}}" style="text-align: center">
<ion-item class="item item-assertive">Test array</ion-item>
<div ng-repeat="x in array">
<img ng-src="{{x.imgURI}}">
</div> center">
Javascript
$scope.takePhoto = function () {
var options = {
quality: 75,
destinationType: Camera.DestinationType.DATA_URL,
sourceType: Camera.PictureSourceType.CAMERA,
allowEdit: true,
encodingType: Camera.EncodingType.JPEG,
targetWidth: 300,
targetHeight: 300,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
};
$scope.array = [];
$cordovaCamera.getPicture(options).then(function (imageData) {
$scope.imgURI = "data:image/jpeg;base64," + imageData;
$scope.imgURI = array;
}, function (err) {
// An error occured. Show a message to the user
});
}