Question

我有一个我添加图像的数组，当我添加图像时，我看到图像显示在下面的缩略图中，我想要一种方法从数组中删除选定的图像。

我有一个名为remove Image的函数，我试图让某些东西工作但是我需要选择数组中的任何图像并删除（就像图像旁边的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

有一个名为$ index的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

从阵列中删除图像

1 个答案: