Я хочу отобразить все изображения определенного свойства. Каждое изображение может принадлежать только одному свойству, а одно свойство может иметь несколько изображений.
Я извлек таблицу изображений и таблицу свойств отдельно. Чтобы назначить каждому изображению свое собственное свойство, я использую идентификатор, как показано ниже.
<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"
) изображение отображается.
После прочтения, я думаю, что scope.Images — это массив со всеми изображениями, поэтому вы должны использовать:
<img ng-repeat="img in Images" ng-src="{{img.imagePath}}"/>
Вы хотите перебрать массив изображений и использовать свойство вашего объекта в ng-src.
Я плохо фильтровал:
<img ng-repeat="img in Images| filter :pro.id" ng-src="{{img.imagePath}}"/>
Это решило проблему, фильтр только по идентификатору свойства!