Question

我有一个添加功能，我将图像添加到名为slots的数组中的广告系列中（每个广告系列都有自己的广告位数组）。

一旦添加到列表中，我希望发布到终点。

问题

发布时我会收到错误

TypeError: Cannot read property 'slots' of undefined

我需要一些帮助修复这篇文章，我无法看到错误是什么以及如何解决它。

我正在尝试发布当前的campaign和base_image。

"campaign": ,
  "slots": [
    {
      "base_image": 
    }
  ]

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>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,campaign)">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.SaveImage = function (campaign) {
        // console.log($scope.campaigns[index].c_name);
        $http({
            url: "http://www.site.co.uk/ccuploader/campaigns/updateSlots",
            method: "POST",
            data: { 'slots': campaign.slots},
            headers: {'Content-Type': 'application/json'}
        }).then(function (response) {
            // success
            console.log('success',response);
            window.alert("success, campaign has been saved");
        }, function (response) { // optional
            // failed
            console.log('failed', response);
        });
    };

Answer 1

将绑定更改为：

<button ng-click="SaveImage(campaign)">

发布最终的json嵌套数组变量

1 个答案: