Angular ng-if isn't hiding if the value is true

Question

I'm trying to understand why ng-if isn't showing the right content.

<div ng-if="user.premium">
     <p>If user.premium is true show this content</p>
</div>
<div ng-if="!user.premium">
     <p>If user.premium is false show this content</p>
</div>

This seems to be the way I would expect it to work. I've done a console.log on user.premium and it returns the following data.

premium: false;

In this instance I would believe that the content to be shown would be the false content.

In this case I'd expect only the true content to show.

premium: true;

However on both true and false I'm getting the true content showing in my DOM.

How would I go about showing the correct content if the property is true or false.

Are you sure that 'true' and 'false' are boolean and not strings? — abidibo
– abidibo, Commented Dec 23, 2015 at 11:18
if you console log user.premium you get premium: true or true? sorry just to clarify it :) — koox00
– koox00, Commented Dec 23, 2015 at 11:22

Dinesh Vaitage · Accepted Answer · 2015-12-23 11:46:12Z

2

Try this solution..

make sure "user", it is object in your controller. like this..

$scope.user = {};
$scope.user.premium = false; //default value

If you can assigned any value to "$scope.user.premium"

$scope.user.premium = true; // Or any other value

Definitely it will work...

<div ng-if="user.premium">
    <p>If user.premium is true show this content</p>
</div>
<div ng-if="!user.premium">
     <p>If user.premium is false show this content</p>
</div>

answered Dec 23, 2015 at 11:46

Dinesh Vaitage

3,2031 gold badge22 silver badges17 bronze badges

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

Comments

Reyraa · Accepted Answer · 2015-12-23 11:41:53Z

1

There are some situations resulting this bug. I try to remark two:

You may need to manually $apply your changes on scope after making it false. This happens when you change a value in scope in in a wrapper which doesn't call for $apply natively.
You may use the variable scope but you have a variable with the same name in the $rooScope or a child scope.

answered Dec 23, 2015 at 11:41

Reyraa

4,3143 gold badges31 silver badges57 bronze badges

Comments

Vinoth Rajendran · Accepted Answer · 2015-12-23 11:23:18Z

0

If you are using As controller(MainController as mainCtrl). You should use like this

<div ng-if="mainCtrl.user.premium">
     <p>If user.premium is true show this content</p>
</div>
<div ng-if="!mainCtrl.user.premium">
     <p>If user.premium is false show this content</p>
</div>

answered Dec 23, 2015 at 11:23

Vinoth Rajendran

1,2011 gold badge15 silver badges28 bronze badges

Comments

Max Lynn · Accepted Answer · 2015-12-23 11:25:32Z

0

I've been a complete plonker and forgot to add the values to my scope..

The answer is adding scope.user = user; to my controller. Yes without the dollar because our set up is odd.

For a proper set up you should use the dollar.

answered Dec 23, 2015 at 11:25

Max Lynn

1,7886 gold badges25 silver badges35 bronze badges

Collectives™ on Stack Overflow

Angular ng-if isn't hiding if the value is true

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related