Question

我有一个列表，每个列表都有一个按钮来调用相机拍照并在本地保存。每次在我的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
  }
});

我需要的是应该显示特定（按钮索引）按钮点击的图像。如果我通过点击第一个按钮拍照，那么图像应该显示在第一个按钮旁边，而不是在那5个项目的任何地方。第6项包含所有拍摄图像的完整列表有人可以帮助我。

点击后获取特定图像

0 个答案: