最終的なjsonネストされた配列変数を投稿する

Question

私はスロット（各キャンペーンには独自のスロット配列があります）という配列のキャンペーンに画像を追加する追加機能を持っています。

リストに追加されると、エンドポイントに投稿します。

問題

私は、私はこのポストを固定し、いくつかの助けを必要とするエラー

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)">