javascript — ng-repeat не отображает данные

Я хочу отобразить все изображения определенного свойства. Каждое изображение может принадлежать только одному свойству, а одно свойство может иметь несколько изображений.

Я извлек таблицу изображений и таблицу свойств отдельно. Чтобы назначить каждому изображению свое собственное свойство, я использую идентификатор, как показано ниже.

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

Обе таблицы извлекаются в порядке. Я использую таблицу свойств для отображения других полей, таких как цена, описание и т. Д., И работает нормально. Но когда я пытаюсь отобразить изображения, ничего не получается.

Также не отображаются ошибки!

Я использую нг-контроллер propertyCtrl в котором я извлекаю таблицу как объект массива

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

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

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>

Регистрация массива объектов Изображений:

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

Регистрация массива объектов Имущество:

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"

Может кто-нибудь объяснить, почему он не показывает изображения?

НОТА: Полученный путь хорош, как при обычной вставке (src ="Images/img.jpg") изображение отображается.

-1

Решение

После прочтения, я думаю, что scope.Images — это массив со всеми изображениями, поэтому вы должны использовать:

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

Вы хотите перебрать массив изображений и использовать свойство вашего объекта в ng-src.

0

Другие решения

Я плохо фильтровал:

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

Это решило проблему, фильтр только по идентификатору свойства!

0