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

Ilan Frumer · Accepted Answer · 2014-10-06 09:06:22Z

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>

answered Oct 6, 2014 at 9:06

Ilan Frumer

32.4k8 gold badges73 silver badges84 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Carlos Over a year ago

Thanks for your help but with your code it displays everything name+image. I would like to chose with a click (show/hide image).

Ilan Frumer Over a year ago

@Carlos No it only shows the chosen image. I use the ngIf directive.

Carlos Over a year ago

I can't click on the item. Maybe I missed something?

Carlos Over a year ago

Oh right ! I didn't use the right version of AngularJS. Thanks !

rbelmega · Accepted Answer · 2014-10-06 09:12:49Z

0

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

and add ng-show

answered Oct 6, 2014 at 9:12

rbelmega

16

Collectives™ on Stack Overflow

AngularJS Show/Hide images

2 Answers 2

4 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related