Angularjsのリストから画像を削除する

Question

シンプルな追加機能を使用して画像を追加するというリストがあります。

これで、リスト内の画像を削除するオプションが必要になりました。

私はシンプルなボタンを持っていますが、私は機能するとは思っていましたが、私はエラーを受け取りました。

ERROR

TypeError: Cannot read property 'slots' of undefined 

私はリストから画像を削除することができるように私は私の削除ボタンを修正するにはどうすればよいの質問

。

add機能が動作していますが、削除ボタンを修正する方法を教えてください。

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

Answer 1

私はあなたがタイプミスのエラーを持っていると思います。 ng-click="removeImage(slot)"

しかし、あなたのコントローラでは、次の2つを受け入れている：

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

あなたがcampaignを渡すことはありませんとして$scope.campaigns であなたのng-clickで唯一つのパラメータを渡しているこの

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

Answer 2

を試してみてくださいパラメータは未定義です。

だから、あなたはあなたのHTMLから2番目のパラメータを渡す必要があります：
ng-click="removeImage(slot,campaign)"