Question

我想显示特定属性的所有图像。每个图像只能属于1个属性，1个属性可以有多个图像。

我分别检索Images表和属性表。要将每张图片分配给它自己的属性，我要将它们分配给它。使用如下所示的ID。

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

这两个表都被正确检索。我使用属性表来显示其他字段，如价格，描述等，并且工作正常。但是，当我试图显示图像时，什么都没有出现。

也没有显示任何错误！

我正在使用ng-controller 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"）时会显示图像。

Answer 1

读完之后，我想那个scope.Images是包含所有图像的数组，所以你应该使用：

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

您希望迭代图像数组，并在ng-src中使用对象的属性。

Answer 2

我过滤得非常糟糕：

Student.create(id: Student.next_id, name: 'John'....)

解决了问题，仅按属性ID过滤！

ng-repeat不显示数据

2 个答案: