Question

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>
Was it helpful?

Solution 2

As I can see, you need this:

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

OTHER TIPS

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.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top