從陣列中刪除圖像

Question

我有一個數組添加圖像，我看到圖像顯示在縮略圖下面，當我添加圖像時，我想從數組中刪除選定的圖像。

我有一個名爲刪除圖像功能，我試圖讓一些工作，但我需要在陣列中選擇任何圖像，並刪除（如X旁邊的圖像）

HTML

<img style="height: 100px; width: 100px" ng-src="{{preview}}" alt="preview image"> 
<label for="file">Select File</label> 
<input ng-model="file" type='file' ng-model-instant name='file' id='fileinput' accept='image/*' onchange='angular.element(this).scope().uploadImage(this)' /> {{uploadError}} 

<button ng-click="addImage()">Add image</button> 
<div ng-repeat="slot in slots"> 
    <img ng-click="addImage()" style="height: 100px; width: 100px" ng-src="{{slot.base_image}}" alt="preview image"> 
</div> 

的JavaScript

$scope.preview = 'img/download.png'; 
    $scope.slots = []; 
    $scope.maxSlots = 5; // this dynamic 

    $scope.uploadImage = function() { 
     // console.log('we are here'); 
     input = document.getElementById('fileinput'); 
     file = input.files[0]; 
     size = file.size; 
     if (size < 650000) { 
      var fr = new FileReader; 
      fr.onload = function (e) { 
       var img = new Image; 

       img.onload = function() { 
        var width = img.width; 
        var height = img.height; 
        if (width == 1920 && height == 1080) { 
         // console.log(e.target.result); 
         $scope.preview = e.target.result; 
         $scope.perfect = "you added a image"; 
         // window.alert("perfect"); 
         $scope.$apply(); 

        } else { 
         $scope.notPerfect = "incorrect definitions"; 
         // console.log(width, height); 
         $scope.$apply(); 
        } 
       }; 
       img.src = fr.result; 
      }; 

      fr.readAsDataURL(file); 
     } else { 
      // window.alert("to big"); 
      $scope.notPerfect = "to big"; 
      // console.log('file size to big') 

     } 
    }; 

    $scope.addImage = function() { 
     if ($scope.slots.length < $scope.maxSlots) { 
      $scope.slots.push({ 
       "slot_id": $scope.slots.length + 1, 
       "base_image": $scope.preview, 
       "path_image": "" 
      }); 

     } else { 
      window.alert("you have to delete a slot to generate a new one"); 
      // console.log('you have to delete a slot to generate a new one') 
     } 
    }; 

    $scope.removeImage = function() { 
     if ($scope.slots.length < $scope.maxSlots) { 
      $scope.slots.push({ 
       "slot_id": $scope.slots.length - 1, 
       "base_image": $scope.preview, 
       "path_image": "" 
      }); 

     } else { 
      window.alert("you have to delete a slot to generate a new one"); 
      // console.log('you have to delete a slot to generate a new one') 
     } 
    }; 

Answer 1

有一個名爲$ I variable you can access in ng-repeat你應該能夠利用這些指標去刪除特定的圖像。類似如下：

<div ng-repeat="slot in slots"> 
    <img ng-click="addImage()" style="height: 100px; width: 100px" ng-src="{{slot.base_image}}" alt="preview image"> 
    <div class="remove-image" ng-click="removeImage($index)>X</div> 
</div> 



$scope.removeImage = function (p_index) { 
    if ($scope.slots.length < $scope.maxSlots) { 
    // Do whatever you're trying to do here 
    // using the index to target the correct array member 
    // Splice below will remove 1 array element starting from p_index position. 
    $scope.slots.splice(p_index, 1) 
    } else { 
    window.alert("you have to delete a slot to generate a new one"); 
    // console.log('you have to delete a slot to generate a new one') 
    } 
}; 

的Javascript Array.prototype.Splice documentation