Получить конкретное изображение после клика
У меня есть список, у каждого есть кнопка, чтобы вызвать снимок камеры и сохранить его локально. Каждый раз в моем HTML я мог просматривать все изображения, которые я сделал.
<body ng-app="starter">
<ion-content class="has-header padding" ng-controller="ImageController">
<ion-list>
<ion-item can-swipe="true" ng-repeat="prod in items">
{{prod.name}}
<button class="button button-small button-energized" ng-click="addImage($index)">Add image</button>
<!-- View image that are taken by the index of button-->
<img ng-repeat="" ng-src="" style="height:50px;"/>
</ion-item>
<ion-item>
<!-- All the image taken are showed as a list-->
<img ng-repeat="image in images" ng-src="{{urlForImage(image)}}" style="height:50px;"/>
</ion-item>
</ion-list>
</ion-conten>
</body>
мой JS
$scope.addImage = function($index,type) {
//$scope.hideSheet();
console.log("index",$index);
ImageService.handleMediaDialog(type).then(function() {
//$scope.$apply();
});
$scope.images = FileService.images();
console.log($scope.images)
var filename = $scope.images;
var productId = $index;
console.log("filename",filename);
console.log("productId",productId);
localStorage.setItem("filename", JSON.stringify(filename));
localStorage.setItem("productId", JSON.stringify(productId));
console.log("filename after localStorage",filename);
console.log("productId after localStorage",productId);
}
мой сервисный файл
angular.module('starter')
.factory('FileService', function() {
var images;
var IMAGE_STORAGE_KEY = 'images';
function getImages() {
var img = window.localStorage.getItem(IMAGE_STORAGE_KEY);
if (img) {
images = JSON.parse(img);
} else {
images = [];
}
return images;
};
function addImage(img) {
images.push(img);
window.localStorage.setItem(IMAGE_STORAGE_KEY, JSON.stringify(images));
};
return {
storeImage: addImage,
images: getImages
}
})
.factory('ImageService', function($cordovaCamera, FileService, $q, $cordovaFile) {
function makeid() {
var text = '';
var possible = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789';
for (var i = 0; i < 5; i++) {
text += possible.charAt(Math.floor(Math.random() * possible.length));
}
return text;
};
function optionsForType(type) {
var source;
switch (type) {
case 0:
source = Camera.PictureSourceType.CAMERA;
break;
case 1:
source = Camera.PictureSourceType.PHOTOLIBRARY;
break;
}
return {
destinationType: Camera.DestinationType.FILE_URI,
sourceType: source,
allowEdit: false,
encodingType: Camera.EncodingType.JPEG,
popoverOptions: CameraPopoverOptions,
saveToPhotoAlbum: false
};
}
function saveMedia(type) {
return $q(function(resolve, reject) {
var options = optionsForType(type);
$cordovaCamera.getPicture(options).then(function(imageUrl) {
var name = imageUrl.substr(imageUrl.lastIndexOf('/') + 1);
var namePath = imageUrl.substr(0, imageUrl.lastIndexOf('/') + 1);
var newName = makeid() + name;
$cordovaFile.copyFile(namePath, name, cordova.file.dataDirectory, newName)
.then(function(info) {
FileService.storeImage(newName);
resolve();
}, function(e) {
reject();
});
});
})
}
return {
handleMediaDialog: saveMedia
}
});
Что мне нужно, так это то, что должны отображаться изображения, снятые определенным нажатием кнопки (индекс кнопки). Если я делаю снимок, нажимая 1-ю кнопку, это изображение должно отображаться рядом с 1-й кнопкой, а не где-либо в этих 5 пунктах. 6-й пункт содержит полный список всех сделанных снимков, может кто-нибудь мне помочь.