ng-repeat zeigt keine Daten an

Question

Ich möchte alle Bilder einer bestimmten Eigenschaft anzeigen. Jedes Bild kann nur zu einer Eigenschaft gehören und eine Eigenschaft kann mehrere Bilder enthalten.

I Abrufen der Bilder Tabelle und Eigenschaft Tabelle getrennt. Um jedes Bild seiner eigenen Eigenschaft zuzuweisen, verwende ich die ID wie unten gezeigt.

<div ng-show="tab.isSet(3)"> 
     <h4>Images</h4> 
     <img ng-repeat="img in Images.imagePath| filter : {propertyId: pro.id}" ng-src="{{img}}"/> 
</div> 

Beide Tabellen werden in Ordnung abgerufen. Ich verwende die Eigenschaftentabelle, um andere Felder wie Preis, Beschreibung usw. anzuzeigen und funktioniert gut. Aber wenn ich versuche, die Bilder anzuzeigen, kommt nichts.

Es werden auch keine Fehler angezeigt!

Ich verwende ng-Controller propertyCtrl, in dem ich die Tabelle als ein Array Objekt bin Abrufen

$http.get("php/retrieveImages.php") 
    .success(function(imageData) { 
      $scope.Images = imageData; 
      console.log(imageData); 
     }).error(function() { 
       $scope.Images="error in fetching data"; 
     }); 

Die PHP:

<?php 
require_once("connection.php"); 
$conn = connectToDb(); 

$query = " SELECT 
      img.imagePath, 
      img.propertyId 
      FROM 
      tbl_images AS img 
      JOIN 
      tbl_property AS pro 
      ON(pro.id=img.propertyId)"; 

$result = mysqli_query($conn, $query) 
     or die("Error in query: ". mysqli_error($conn)); 


    $imageData = array(); 
    while ($row = mysqli_fetch_assoc($result)){ 
     $imageData[] = $row; 
    } 
    echo json_encode($imageData); 
?> 

Die HTML:

<div ng-controller="propertyCtrl"> 

      <div ng-repeat="pro in property | filter:searchProp | orderBy:Select" > 
        <table class="table"> 
         <thead class="thead-default"> 
         <tr> 
          <th><span class='notbold'>Property Reference Number:</span> {{pro.id}}</th> 
          <th><span class='notbold'>Location:</span> {{pro.location}}</th> 
          <th><span class='notbold'>Property Type:</span> {{pro.propertyType}}</th> 
          <th><span class='notbold'>Commercial Or Residential:</span> {{pro.propertyType2}}</th> 
         </tr> 
         </thead> 
       </table> 
       <section ng-controller="TabController as tab" > 
        <ul class="nav nav-pills"> 
         <li ng-class="{active:tab.isSet(1)}"> 
          <a href ng-click="tab.setTab(1)">Description</a> 
         </li> 
         <li ng-class="{active:tab.isSet(2)}"> 
          <a href ng-click="tab.setTab(2)">Price</a> 
         </li> 
         <li ng-class="{active:tab.isSet(3)}"> 
          <a href ng-click="tab.setTab(3)">Images</a> 
         </li> 
        </ul> 
        <div ng-show="tab.isSet(1)"> 
         <h4>Description</h4> 
         <blockquote>{{pro.description}}</blockquote> 
        </div> 
        <div ng-show="tab.isSet(2)"> 
         <h4>Price</h4> 
         <blockquote> € {{pro.price}}</blockquote> 
        </div> 
        <div ng-show="tab.isSet(3)"> 
         <h4>Images</h4> 
//ng-repeat not working!!! 
<img ng-repeat="img in Images.imagePath| filter : {propertyId: pro.id}" ng-src="{{img}}"/> 
    </div> 
</div> 

Protokollierung des Objektarrays Ima ges:

Array[4] 
0:Object 
imagePath:"Images/3D-printed-gun-Liberator-006.jpg" 
propertyId:"8" 

Logging das Objekt Array Property:

Array[6] 
0:Object 
$$hashKey: "object:9" 
description:"A lovely flat near university.!!" 
id:"8" 
location:"Rabat" 
locationId:"2" 
price:"401.000" 
propertyType:"Apartment" 
propertyType2:"Commercial" 
propertyTypeId:"1" 
propertyTypeId2:"2" 

Kann jemand erklären, warum es nicht die Bilder zeigen?

HINWEIS: Der Pfad abgerufen ist gut, als wenn normal eingefügt (src ="Images/img.jpg") das Bild angezeigt wird.

Answer 1

Nachdem Sie lesen, ich denke, dass scope.Images ist das Array mit allen Bildern, so sollten Sie verwenden:

<img ng-repeat="img in Images" ng-src="{{img.imagePath}}"/> 

Sie wollen durch Anordnung von Bildern zu durchlaufen, und verwenden Sie die Eigenschaft des Objekts in ng-src.

Answer 2

Ich war Filterung schlecht:

<img ng-repeat="img in Images| filter :pro.id" ng-src="{{img.imagePath}}"/> 

, dass das Problem, Filter durch Eigenschaft id gelöst nur!