unable to hide div in angular js using ng-if

Question

unable to hide div on loading page. I want to show the div if the value of array is empty.

    <div ng-hide="loading"  ng-if="users== null || users.length === 0" >
        <h3>No Result Found</h3>
    </div>

combine expressions together: loading && (users==null || users.length===0) — Aleksey Solovey
– Aleksey Solovey, Commented Nov 13, 2017 at 9:03
use one of the directive ng-hide or ng-if according to your condition — Yogesh Nikam
– Yogesh Nikam, Commented Nov 13, 2017 at 9:09
@everyone who is saying don't use ng-hide with ng-if can you explain why? — jitender
– jitender, Commented Nov 13, 2017 at 9:13
@jitender simply pointless, ng-if removes DOM, ng-hide sets its display to none. Why bother hiding it, when DOM will be removed? — Aleksey Solovey
– Aleksey Solovey, Commented Nov 13, 2017 at 9:21

Hey24sheep · Accepted Answer · 2017-11-13 11:57:36Z

2

This is what you should do.

//This will check if loading is false and Users are not undefined || less than equal to 0 (empty array)
<div ng-if="!loading || !users || users.length <= 0">
    <h3>No Result Found</h3>
</div>

//Show data if users are defined and length is greater than 0
<div ng-if="users && users.length > 0">
        <h3>Data</h3>
</div>

Using ng-show and ng-hide

//Show if loading is true or users are undefined or users are empty
//Hide if loading is false or users are defined or users are not empty
<div ng-show="loading || !users || users.length <= 0"
     ng-hide="!loading || users || users.length > 0">
        <h3>No Result Found</h3>
</div>

//Show if users are defined and length is greater than 0
//Hide if loading is true or users are undefined or users are empty
<div ng-show="users && users.length > 0"
     ng-hide="loading || !users || users.length <= 0">
        <h3>Data</h3>
</div>

ng-hide/show just sets the display property of the element to "none" whereas, ng-if removes the element from the dom

edited Nov 13, 2017 at 11:57

answered Nov 13, 2017 at 9:54

Hey24sheep

1,2127 silver badges16 bronze badges

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

13 Comments

user3074158 Over a year ago

not working. there is two div one is for to display result and one is for no result.. unable to understand where to use ng-if

Hey24sheep Over a year ago

@user3074158 check my answer now. I have updated it and explained everything.

user3074158 Over a year ago

where is define the scope of loading ?

Hey24sheep Over a year ago

That you will be doing it in your controller. As you haven't given us your code so I am assuming that "loading" is a $scope variable and defined already somewhere in your code just like users array.

user3074158 Over a year ago

In controller, i mentioned this two lines only $scope.users = []; $scope.loading = [] ;

|

Newaz Sharif · Accepted Answer · 2017-11-13 10:19:36Z

0

This may work for you

<div ng-if="!loading && (typeof(users) === 'undefined'  || users== null || users.length === 0)" >
    <h3>No Result Found</h3>
</div>

answered Nov 13, 2017 at 10:19

Newaz Sharif

4244 silver badges12 bronze badges

3 Comments

user3074158 Over a year ago

not working. there is two div one is for to display result and one is for no result.. unable to understand where to use ng-if

Newaz Sharif Over a year ago

I think you should check value of $scope.loading. Why not upload whole code on plunker?

user3074158 Over a year ago

<div class="container" ng-hide="" ng-repeat="user in users" > here m displaying result </div> <div ng-if="!user || user.length <= 0"> <h3>No Result Found</h3> </div>

Tushar Walzade · Accepted Answer · 2017-11-13 12:26:50Z

0

This may help you - use && or || as per your case here -

<div ng-hide="loading && users.length == 0">
    <h3>No Result Found</h3>
</div>

edited Nov 13, 2017 at 12:26

answered Nov 13, 2017 at 9:31

Tushar Walzade

3,8274 gold badges38 silver badges60 bronze badges

6 Comments

Boaz Over a year ago

Note that Boolean([]) === true, so if users is a defined array, the above expression may be truthy even if the array is empty.

Tushar Walzade Over a year ago

Yeah, that's what he wants. ng-hide will hide the div if users array isn't empty.

Boaz Over a year ago

Again, an empty array in JS evaluates as boolean true, unlike in PHP for example. So the div would be hidden as long as the array is defined, regardless if its empty or not. Simply try it.

Tushar Walzade Over a year ago

okay, So, here, we update it with - users.length. Thank You!

user3074158 Over a year ago

not working. there is two div one is for to display result and one is for no result.. unable to understand where to use ng-if

|

Collectives™ on Stack Overflow

unable to hide div in angular js using ng-if

3 Answers 3

13 Comments

3 Comments

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

13 Comments

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related