Angular ng-if not true

Question

Why doesn't this work.

<li ng-if="!area"></li>

Feels a bit illogical since

<li ng-if="area"></li>

works just fine.

'area' is defined in scope as true/false Any workarounds for this? I would prefer not to use ng-show/ng-hide since both of them renders items in DOM.

It should work just fine the way you do it, do you have any more code examples? — Lowe Bäckström, Oct 08 '14 at 21:06
Show your code where you define area in your controller. I suspect area is in fact truthy, not necessarily false. — Beyers, Oct 08 '14 at 21:20
possible duplicate of [How do I negate the parameter for AngularJS ng-if directive?](http://stackoverflow.com/questions/22967847/how-do-i-negate-the-parameter-for-angularjs-ng-if-directive) — Blackhole, Jun 03 '15 at 18:31
console.log($scope.area) and see if maybe the boolean true/false is maybe a string of "true/false" ;-) — Ricky Levi, Jun 14 '15 at 13:13

score 83 · Answer 1 · answered Aug 22 '15 at 13:18

83

use this

ng-if="area == false"

OR

ng-if="area == true"

this may help someone

answered Aug 22 '15 at 13:18

Sachin Sudhakar Sonawane

1,695
15
34

Use ng-if="area==0" // False – Thisara Subath Nov 19 '18 at 09:28

Raj · Answer 2 · 2016-10-14T11:06:48.723

7

Use like this

<div ng-if="data.IsActive === 1">InActive</div>
<div ng-if="data.IsActive === 0">Active</div>

edited Oct 14 '16 at 11:06

answered Jun 14 '16 at 12:47

Raj

409
7
23

Rizo · Answer 3 · 2018-04-27T09:19:12.217

3

try this:

<div ng-if="$scope.length == 0" ? true : false></div>

and show or hide

<div ng-show="$scope.length == 0"></div>

else it will be hide

-----------------or--------------------------

if you are using $ctrl than code will be like this:

try this:

<div ng-if="$ctrl.length == 0" ? true : false></div>

and show or hide

<div ng-show="$ctrl.length == 0"></div>

else it will be hide

edited Apr 27 '18 at 09:19

answered Feb 22 '18 at 07:47

Rizo

2,391
1
15
18

score 2 · Answer 4 · answered Jun 16 '20 at 11:46

2

Just use for True:

<li ng-if="area"></li>

and for False:

<li ng-if="area === false"></li>

answered Jun 16 '20 at 11:46

coloma1984

41
4

score 0 · Answer 5 · answered Jan 25 '18 at 19:45

0

In angular 1, you can use ng-show and ng-hide.In your case, you would use ng-hide. For example:

<li ng-hide="area"></li>

answered Jan 25 '18 at 19:45

aslantorret

235
3
10

The side-effect to this approach is that `ng-hide` will keep the elements in the dom, while `ng-if` does not render them at all. – serialworm May 31 '18 at 00:02

score 0 · Answer 6 · answered Apr 11 '18 at 09:20

0

you are not using the $scope you must use $ctrl.area or $scope.area instead of area

answered Apr 11 '18 at 09:20

M Usman Nadeem

383
1
13

Angular ng-if not true

6 Answers6