Using ng-if in angular to display or hide image

Question

I'm trying to display a series of image on the screen but hide or not show the one with a specific image name, but so some reason it is either hiding all images or showing just one.

Here is my code, any help is appreciated.

<div ng-repeat="x in documents" ng-if="x.document_name=='leftover.png'" ng-show="not_admin">             
    <img src="{{ x.image }}" width="30" height="30"> 
    <p><b>{{ x.document_name }}</b></p>          
</div>

I want to hide just one div if the image is 'leftover.png' and not_admin is true which is already set to true in my controller.

Update

I should have been a lot clearer, what I want is to show all the images if the user is an admin, but hide just the 'leftover.png' otherwise.

So, if the logged in user is not an admin, they can see all the images except 'leftover.png', but when an admin logs in they can see all the images.

I hope this makes more sense.

Sajeetharan · Accepted Answer · 2019-06-07 11:35:49Z

1

You can combine both condition in single ng-if

<div ng-repeat="x in documents" ng-if="!x.document_name=='leftover.png' && !not_admin">             
    <img src="{{ x.image }}" width="30" height="30"> 
    <p><b>{{ x.document_name }}</b></p>          
</div>

edited Jun 7, 2019 at 11:35

answered Jun 7, 2019 at 11:27

Sajeetharan

223k65 gold badges370 silver badges409 bronze badges

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

7 Comments

Helen Neely Over a year ago

Thanks, your suggestion hides all the images - nothing shows on the screen. I want to hide just one image if they are not an admin...that's the image with the name 'leftover.png'

Sajeetharan Over a year ago

try now i think it should

Sajeetharan Over a year ago

did it fix the issue?

Helen Neely Over a year ago

Sorry, it did not work - still hiding the images. Hmm :(

kendavidson Over a year ago

I think you want !(x.document_name=='leftover.png' && not_admin) or !x.document_name=='leftover.png' || !not_admin for what you're trying to do. Display all images except lefover, unless not_admin is false.

|

rahim.nagori · Accepted Answer · 2019-06-08 09:13:58Z

0

Why you are using an unnecessary condition :

ng-show="not_admin"

if it (not_admin) is true for all the cases and required. Try merging both the condition like this :

ng-if="x.document_name != 'leftover.png' && not_admin"

answered Jun 8, 2019 at 9:13

rahim.nagori

6668 silver badges20 bronze badges

Collectives™ on Stack Overflow

Using ng-if in angular to display or hide image

2 Answers 2

7 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related