Bilder aus Array entfernen

Question

Ich habe ein Array, wo ich Bilder hinzufügen, ich sehe die Bilder in Miniaturansicht unten angezeigt, wenn ich ein Bild hinzufügen, möchte ich eine Möglichkeit, ein ausgewähltes Bild aus dem Array zu entfernen.

Ich habe eine Funktion namens Bild entfernen, wo ich versuchte, etwas zum Laufen zu bringen, aber ich brauche eine beliebiges Bild im Array auszuwählen und zu entfernen (wie ein X neben dem das Bild)

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

Es gibt eine variable you can access in ng-repeat namens i $ ndex, den Sie nutzen können, um das Entfernen bestimmter Bilder zu verhindern. Etwas wie folgt aus:

<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