Javascript 从Angularjs中的列表中删除图像

我有一个列表，您可以使用一个简单的添加函数将图像添加到其中

我现在需要选项删除列表中的图像

我有一个简单的按钮和一个功能，我相信会工作，但我得到了一个错误

错误

TypeError: Cannot read property 'slots' of undefined

问题

如何修复“删除”按钮，以便从列表中删除图像

添加功能正在工作，如何修复删除按钮

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>

{campaign.c_name}{{$index}}此活动允许您使用{campaign.max_slots}}图像
选择文件
预览图像
添加到列表中
图像
拯救运动
删除图像

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);
    };

$scope.addImage=功能（活动）{
console.log（'加载项活动'，活动）；
如果（！活动）{
console.log（“无活动”）；
}否则{
if（campaign.slots.length

我想你有打字错误。在

$scope.magnities中

试试这个

---

我想你有打字错误。在

$scope.magnities中

试试这个

---

您在

ng click

中只传递了一个参数：

ng click=“removeImage（slot）”

但在控制器中，您接受两个：

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

由于您从未传递

活动

参数，因此该参数未定义

因此，您需要从HTML中传递第二个参数：

---

ng click=“removeImage（slot，campaign）”

您在

ng click

中只传递了一个参数：

ng click=“removeImage（slot）”

但在控制器中，您接受两个：

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

由于您从未传递

活动

参数，因此该参数未定义

因此，您需要从HTML中传递第二个参数：

---

ng单击=“移除图像（插槽，活动）”

Hi，@Beep。请注意，该参数仅适用于角度2+。对于角度为1.x的问题，请使用标签。@n00dl3谢谢，伙计，刚刚修复了标题hi，@Beep。请注意，该参数仅适用于角度2+。对于angular 1.x问题，请使用标记。@n00dl3谢谢你，刚刚修复了标题，这只是一个类型，不幸的是仍然得到了错误，+1表示位置。而不是

（$scope.campaign.slots.indexOf，1）

do

（campaign.slots.indexOf，1）

。只需删除$scopewhich它只是一个类型，不幸的是仍然会得到错误，+1用于现场。而不是

（$scope.campaign.slots.indexOf，1）

do

（campaign.slots.indexOf，1）

。只需删除$scopehmm就可以了，我得到一个新的错误lol

TypeError:cannotread属性'indexOf'of'undefined

您正在访问

活动的
插槽
。
slot
属性是为每个活动定义的，而不是为
活动
数组定义的。hmm好了，我得到了一个新的错误lol
TypeError:无法读取未定义的
属性'indexOf'，您正在访问
活动
的
slot
。
插槽
属性是为每个活动定义的，而不是为
活动
数组定义的。