AngularJS Show/Hide images

Question

I have a list with a name + 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
}

So I can easly display the names:

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

but It doesn't work if I want to click the name and display the image. Then I want to click on the other name, hide the previous image and diplay the new image.

<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" /> 

My function showImage()

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

Thanks for your help!

Carlos

Answer 1

Try this piece of code:

<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

You can use ng-click function {{product.name}}

and add ng-show