Zeige Array-Objekte innerhalb eines Arrays mit Angular ng-repeat

Ich habe einen einfachen Beitrag, der meine JSON-Objekte bekommt.Zeige Array-Objekte innerhalb eines Arrays mit Angular ng-repeat

In meinem JSON habe ich 2 oder mehr Kampagnen, Kampagnen ist ein Array.

innerhalb eines Kampagnen-Arrays Ich habe Slots, Slots ist ein Array, das 1 oder mehr base_image hat.

Ich werde auf dem Bildschirm für jede Kampagne angezeigt.

max_slots
c_name
slots.base_image

so dass ich jeden Kampagnennamen zeigen können, maximal Schlitze erlaubt und die Bilder innerhalb jeder Kampagne zugeordnet.

AIM

ich für jede Kampagne ein Bild hochladen und Vorschaubild zu haben, ich versuche, so dass Sie nur die Bildvorschau, um die Kampagne finden Sie in es zu laden.

PROBLEM

Im Moment lade ich ein Bild und zeigt es auf der Vorschau für alle Kampagnen, nicht die einzelnen Kampagne.

Siehe Bild unten:

HTML

<body ng-app="myApp"> 
<div ng-controller="Dashboard"> 
    <!--FIRST ng-repeat--> 
    <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 id="fileinput" ng-model="file" type="file" ng-model-instant="" name="file" 
            accept="image/*" 
            onchange="angular.element(this).scope().uploadImage(this)"> 
         </div> 
         <!--END--> 
        </td> 
        <td> <!--PREVIEW IMAGE--> 
         <div class="preview"> 
          <img style="height: 100px; width: 100px" ng-src="{{preview}}" alt="preview image"> 
         </div> 
         <!--END--></td> 
        <td> 
         <button ng-click="addImage()">Add image</button> 
        </td> 
        <td> 
         <div ng-repeat="slot in campaign.slots" class="slot"> 
          <img ng-click="addImage()" style="height: 100px; width: 100px" ng-src="{{base_image}}" 
           alt="slot image"> 

          <button ng-click="removeImage(slot)">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> 
    <!--END FIRST ng-repeat--> 
</div> 
</body>

JavaScript

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

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

     $scope.uploadImage = function() { 
      // console.log('we are here'); 
      input = document.getElementById('fileinput'); 
      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) { 
          $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 (index) { 

      if ($scope.campaigns[index].slots.length < $scope.campaigns.maxSlots) { 
       $scope.campaigns[index].slots.push({ 
        "slot_id": $scope.campaigns[index].slots.length + 1, 
        "base_image": $scope.preview, 
        "path_image": "" 
       }); 

      } else { 
       window.alert("you have to delete a slot to generate a new one"); 
      } 
     }; 

$scope.GetData = function() { 
      $http({ 
       url: "http://www.site.co.uk/ccuploader/campaigns/getCampaign", 
       method: "POST", 
       date: {}, 
       headers: {'Content-Type': 'application/json'} 
      }).then(function (response) { 
       // success 
       console.log('you have received the data '); 
       // console.log(response); 
       $scope.campaigns = response.data; 
       console.log("logging campaings", $scope.campaigns); 
       //$scope.slots = response.data[0].slots; 
       //$scope.maxSlots = response.data[0].maxSlots; 

      }, function (response) { 
       // failed 
       console.log('failed getting campaigns goo back to log in page.'); 
       // console.log(response); 
      }); 
     }; 

     $scope.GetData(); 
    })

Quelle

2017-09-28 Beep

Sie haben nur eine preview Variable in Ihrem Controller, aber Sie benötigen eine pro campaign. Vielleicht möchten Sie den Index der Kampagne in Ihre Funktion übergeben.

Ich bin mir nicht sicher, ob die Art und Weise Sie die Dateieingänge tun korrekt ist (habe es nicht viel selbst getan), aber man braucht etwas wie folgt aus:

Vorlage:

<input type="file" onchange="angular.element(this).scope().uploadImage(this, $index)"> 

<img ng-src="{{campaign.preview}}" alt="preview image">

Controller:

$scope.uploadImage = function (element, index) { 
    // Remove this - there are many file inputs with this ID. Use the element or index arguments? 
    // input = document.getElementById('fileinput'); 
    // ... 

    if (width == 1920 && height == 1080) { 
     $scope.campaigns[index].preview = e.target.result; 
    } 
}

Wie oben in meinem Kommentar erwähnt, können Sie auch input = document.getElementById('fileinput'); wurden den Aufruf der Datei-Eingabe zu erhalten, aber ng-repeat werden viele inpu erstellt haben ts mit dieser ID. Vielleicht sollten Sie die Eingabe oder den Index verwenden, der an uploadImage(this, $index) übergeben wird.Wenn aus irgendeinem Grund müssen Sie noch getElementById verwenden, anstatt das Element mit Ihnen in übergeben, können Sie eindeutige IDs unter Verwendung des Index generieren:

<input id="fileinput-{{ $index }}"

Edit: Die OP die Antwort oben mit einigen Modifikationen verwendet:

HTML

<input id="fileinput-{{ $index }}" ng-model="file" type="file" ng-model-instant="" name="file" accept="image/*" onchange="angular.element(this).scope().uploadImage(this)">

-Controller

$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"; 
      } 
     };

Quelle

2017-09-28 09:41:22

Danke dafür macht Sinn. erkämpfe diesen Test und werde hoffentlich deine Antwort annehmen. – Beep

nur versuchen, einen Fehler zu beheben im Erhalten von 'Uncaught ReferenceError: $ Index ist nicht definiert' das einmal seine Arbeit Ill akzeptieren Antwort – Beep

Benennen Sie den Funktionsparameter 'index' oder' $ index'? In der Vorlage muss es '$ index' sein, aber in der Funktion habe ich es' index' genannt. –

Zeige Array-Objekte innerhalb eines Arrays mit Angular ng-repeat

Antwort

Verwandte Themen