Delete image from list in Angularjs

Question

I have a list that you add images to using a simple add function.

I now need the option to delete a image in the list.

I have a simple button and a function I believed would work however I am, getting a error.

ERROR

TypeError: Cannot read property 'slots' of undefined

Question

How do I fix my delete button so that I can remove the image from the list.

The add function is working, how do I fix the remove button.

HTML

<div ng-repeat="campaign in campaigns" class="campaign-container">
    <div class="container">
        <h1>{{campaign.c_name}} {{$index}}</h1><strong>This Campaign you are allowed {{campaign.max_slots}} Images</strong>
        <table class="table">
            <thead>
            <tr>
                <th>Select File</th>
                <th>Preview Image</th>
                <th>Add to list</th>
                <th>Images</th>
                <!-- <th>Remove Image</th>-->
                <th>Save Campaign</th>
            </tr>
            </thead>
            <tbody>
            <tr>
                <td>
                    <!-- UPLOAD IMAGE-->
                    <div class="upload-new">
                        <input type="file"  fileread="vm.uploadme" id="fileinput-{{ $index }}" onchange="angular.element(this).scope().uploadImage(this)"/>
                    </div>
                    <!-- END-->
                </td>
                <td>
                    <!-- PREVIEW IMAGE-->
                    <div class="preview">
                        <img style="height: 100px; width: 100px" ng-src="{{campaign.preview}}" alt="preview image">
                    </div>
                    <!-- END-->
                </td>
                <td>
                    <button ng-click="addImage(campaign)">
                        <i class="fa fa-plus-circle" style="font-size: 45px;" aria-hidden="true"></i>
                    </button>
                </td>
                <td>

                    <div ng-repeat="slot in campaign.slots" class="slot">
                        <img style="height: 100px; width: 100px" ng-src="{{slot.base_image}}" alt="show image here">
                        <button ng-click="removeImage(slot)">Remove Image</button>
                    </div>
                </td>
                <td>
                    <button ng-click="SaveImage()">
                        <i class="fa fa-floppy-o" style="font-size: 45px;" aria-hidden="true"></i>
                    </button>
                </td>
            </tr>
            </tbody>
        </table>
    </div>
</div>

JavaScript

   $scope.addImage = function (campaign) {
        console.log('add in campaign', campaign);
        if (!campaign) {
            console.log('no campaign');
        }else {
            if (campaign.slots.length < campaign.max_slots) {
                campaign.slots.push({
                    "slot_id": $scope.length + 1,
                    "base_image": campaign.preview,
                    "path_image": ""
                });
            } else {
                window.alert("you have to delete a slot to generate a new one");
            }
    }
    };

  $scope.removeImage = function (s,campaign) {
        campaign.slots.splice($scope.campaigns.slots.indexOf(s), 1);
    };

Hi, @Beep. Please note that the angular is only for angular 2+. For angular 1.x question, use the angularjs tag. — n00dl3
– n00dl3, Commented Sep 29, 2017 at 8:37

archeal anie · Accepted Answer · 2017-09-29 08:48:51Z

4

I think you have typo error. in $scope.campaigns try this

$scope.removeImage = function (s,campaign) {
    campaign.slots.splice(campaign.slots.indexOf(s), 1);
};

edited Sep 29, 2017 at 8:48

answered Sep 29, 2017 at 8:35

archeal anie

2602 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Beep Over a year ago

Wish it was just a type, unfortunately still get the error, +1 for the spot though.

archeal anie Over a year ago

instead of ($scope.campaign.slots.indexOf(s), 1) do (campaign.slots.indexOf(s), 1). just remove the $scope

Prerak Sola · Accepted Answer · 2017-09-29 08:40:39Z

0

You are passing only one parameter in your ng-click: ng-click="removeImage(slot)"

But in your controller, you are accepting two:

$scope.removeImage = function (s,campaign) {
    campaign.slots.splice($scope.campaigns.slots.indexOf(s), 1);
};

As you never pass the campaign parameter, it is undefined.

So, you need to pass the second parameter from your HTML:
ng-click="removeImage(slot,campaign)"

answered Sep 29, 2017 at 8:40

Prerak Sola

10.1k8 gold badges39 silver badges77 bronze badges

2 Comments

Beep Over a year ago

hmm ok with this I get a new error lol TypeError: Cannot read property 'indexOf' of undefined

Prerak Sola Over a year ago

You are accessing slots of campaigns. The slot property is defined for each of the campaign and not the campaigns array.

Collectives™ on Stack Overflow

Delete image from list in Angularjs

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related