AngularJS array of objects ng-show or ng-if

Question

I need to show a message of "No categories" so im using this:

<div ng-repeat="categoryItem in categories">
                 <div ng-show="categoryItem.length">No categories</div>

And doesn't work.

It's an array of objects, so in the console if i have 2 categories i can see this:

Array[2]
0
:
Object
$$hashKey
:
"object:77"
created_at
:
"2016-12-07T19:45:29.997063"
created_by
:
"test"
id
:
39
name
:
"Category 1"
updated_at
:
"2016-12-07T19:45:29.997105"
updated_by
:
null
__proto__
:
Object
1
:
Object
$$hashKey
:
"object:78"
created_at
:
"2016-12-07T19:45:34.202915"
created_by
:
"test"
id
:
40
name
:
"Category 2"
updated_at
:
"2016-12-07T19:45:34.202947"
updated_by
:
null
__proto__
:
Object
length
:
2

So, when i delete all the categories i programmed a simple if:

                if($scope.categories.length === 0){
                console.log("No categories");
            }

It works but the message are not showed in the view, what im doing wrong?

wouldn't you want to show the data when there isn't a length, rather than when there is? — Claies
– Claies, Commented Dec 8, 2016 at 1:56
I try !categoryItem.length and categoryItem.length === 0 and doesn't works — Slvr
– Slvr, Commented Dec 8, 2016 at 1:57

bob · Accepted Answer · 2016-12-08 02:20:51Z

2

The message will not display when there are 0 categories because the message is inside your ng-repeat. Because the length of the categories array is 0 there will be 0 items in the view.

Place your "No Categories" message outside the ng-repeat like so:

<div ng-repeat="categoryItem in categories">
    <div>{{categoryItem.name}}</div>
</div>
<div ng-hide="categories.length > 0">No categories</div>

Please note that I'm using ng-hide and checking the length of your categories array to determine if the "No categories" message should be displayed.

edited Dec 8, 2016 at 2:20

answered Dec 8, 2016 at 2:16

bob

1,00312 silver badges21 bronze badges

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

2 Comments

Slvr Over a year ago

You have all the reason, that's the correct solution. It works, thank you.

bob Over a year ago

If this solution worked for you please feel free to accept this answer as correct.

Collectives™ on Stack Overflow

AngularJS array of objects ng-show or ng-if

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related