Question

我有一个名为+ url_image的列表：

{
    "_id": ObjectId("54324ef2dbf522b45166a746"),
    "name": "imageOCR1",
    "url_image": "http://meta-e.aib.uni-linz.ac.at/ocr/images/biographie_oc
    r.gif ",
    "__v": 0
} {
    "_id": ObjectId("54324ef2dbf522b45166a747"),
    "name": "imageOCR2",
    "url_image": "http://www.textcreationpartnership.org/files/2012/02/ocr.
    jpg ",
    "__v": 0
}

所以我可以轻松地显示名称：

<div class="container" ng-controller="imageController">
    <div ng-repeat="product in products">
        <h3>name: {{product.name}}</h3>
    </div>
</div>

但是如果我想点击名称并显示图像，它就不起作用。然后我想点击另一个名称，隐藏上一个图像并显示新图像。

<a onClick="showImage();" style="cursor: pointer; cursor: hand;">{{product.name}}</a>
<img id="loadingImage" src="{{product.url_image}}" style="visibility:hidden" height="650" width="600" />

我的功能 showImage（）

function showImage() {
    document.getElementById('loadingImage').style.visibility = "visible";
}

感谢您的帮助！

卡洛斯

Answer 1

试试这段代码：

<div class="container" ng-controller="imageController">
  <div ng-repeat="product in products">
    <h3 ng-click="products.chosen=product">name: {{product.name}}</h3>
    <img ng-if="products.chosen==product" ng-src="{{product.url_image}}"/>
  </div>
</div>

Answer 2

您可以使用ng-click功能 {{product.name}}

并添加ng-show

AngularJS显示/隐藏图像

2 个答案: