Bestimmtes Bild nach einem Klick erhalten

Ich habe eine Liste mit einer Schaltfläche zum Aufrufen der Kamera, um Bilder aufzunehmen und lokal zu speichern. Jedes Mal in meinem HTML konnte ich alle Bilder sehen, die ich gemacht habe.

<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>

my 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);
  }

meine Servicedatei ist

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
  }
});

Was ich brauche, ist Bilder, die durch den spezifischen (Index der Taste) Knopfklick gemacht werden, sollte angezeigt werden. Wenn ich ein Bild mache, indem ich auf die 1. Schaltfläche klicke, sollte dieses Bild neben der 1. Schaltfläche und nicht irgendwo in diesen 5 Elementen angezeigt werden. Der sechste Punkt enthält die gesamte Liste aller aufgenommenen Bilder. Könnte mir jemand helfen?

Antworten auf die Frage(0)

Ihre Antwort auf die Frage