角度ベース64の画像が表示されない

Question

ユーザーが画像をアップロードし、プレビューを表示してから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($index)">Add image</button> 
       </td> 
       <td> 
        <div ng-repeat="slot in campaign.slots" class="slot"> 
         <img ng-click="addImage($index)" style="height: 100px; width: 100px" ng-src="{{slots.base_image}}" alt="show image here"> 
         <img ng-src="{{slots.base_image}}" /> 
         <button ng-click="removeImage(slots)">Remove Image</button> 
        </div> 
       </td> 
       <!-- <td>Remove button to be here</td>--> 
       <td> 
        <button ng-click="SaveImage()">Save to API</button> 
       </td> 
      </tr> 
      </tbody> 
     </table> 
    </div> 
</div> 

はJavaScript

 .controller('Dashboard', function ($scope, $http, $timeout) { 

     $scope.campaigns = []; 
     $scope.preview = ''; 
     // $scope.slots = []; 
     // $scope.maxSlots = maxSlots; 

     $scope.uploadImage = function (element, index) { 
      console.log(element); 
      console.log(element.id); 
      str = element.id; 
      str = str.substr(str.indexOf('-') + 1); 
      console.log(str); 
      index = str; 

      // console.log('we are here'); 
      input = element; 
      file = input.files[0]; 
      size = file.size; 
      if (size < 650000) { 
       var fr = new FileReader; 
       fr.onload = function (e) { 
        var img = new Image; 

        img.onload = function() { 
         var width = img.width; 
         var height = img.height; 
         if (width == 1920 && height == 1080) { 
console.log('we are here'); 
          $scope.campaigns[index].preview = e.target.result; 
          // $scope.preview = e.target.result; 
          $scope.perfect = "you added a image"; 
          $scope.$apply(); 

         } else { 
          $scope.notPerfect = "incorrect definitions"; 
         } 
        }; 
        img.src = fr.result; 
       }; 

       fr.readAsDataURL(file); 
      } else { 
       $scope.notPerfect = "to big"; 
      } 
     }; 

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

Answer 1

あなたはあなたのビューとモデルの間にいくつかの命名問題と一貫性を持っています。このような何かにあなたのaddImageを変更します。

$scope.addImage = function (campaign) { 
    if(!campaign) return; 
    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"); 
    } 
}; 

そして、あなたはそのような結合：

`addImage`で

<div ng-repeat="slot in campaign.slots" class="slot"> 
    <img style="height: 100px; width: 100px" ng-src="{{slot.base_image}}" alt="show image here"> 
    <img ng-src="{{slot.base_image}}" /> 
    <button ng-click="removeImage(slot)">Remove Image</button> 
</div>