CODEWITHSUNDEEP
javascriptangularjsng-show
Daft
Daft

Reputation: 10964

Ng-show not working as expected? Angular

As is my understanding of Angular, only one of the two following elements should be visible at a time, but for some reason, both are displaying. Is there a mistake in my code I just can't see?

Am I using ng-show incorrectly?

<div class="no_people" ng-show="!person.name">
    <p>no people</p>
</div>

<div ng-repeat="person in details.people">
    <div class="persons_table">
        <table>
            <tbody>
                <tr class="top_row">
                    <td colspan="2">                            
                        <span class="person_name">
                            {{ person.name }}
                        </span>
                        <span class="person_address" >
                            {{ person.address }}
                        </span>
                    </td>
                </tr>
            </tbody>
        </table>
    </div>
</div>

Upvotes: 0

Views: 126

Answers (2)

Lajos Veres
Lajos Veres

Reputation: 13725

I think this way it should work:

<div class="no_people" ng-hide="details.people.length">
    <p>no people</p>
</div>

The person variable is only accessible inside the ng-repeat.

And using ng-hide instead of ng-show=! is maybe a bit more cleaner.

Upvotes: 4

Khanh TO
Khanh TO

Reputation: 48982

As I can see, you need this:

<div class="no_people" ng-hide="details.people.length > 0">
    <p>no people</p>
</div>

Upvotes: 1

Related Questions