The ng-hide element appears for a while and then hide?

Question

<div class="alert alert-warning" ng-hide="badges.length">      
    <strong>Empty!</strong> This Micro_organization has No badges.
</div>
<ul> 
  <li ng-repeat="badge in badges">{{ badge.title }}</li>
</ul>

even if badges are not empty, the message Empty! This Micro_organization has No badges. Empty! This Micro_organization has No badges. appears for a while.

Is there any solution so that the message will only show if badges is empty?

Answer 1

if you are using ajax request to get the data then badges will undefined untill ajax call return the data.

untill the data receive badges.length will stay undefined then then ng-hide="badges.length" will result in something ng-hide="false" thats may be the case of partially apearing the div

--solution--

if you declare $scope.badge before u get the resource data remove that declaration. declare $scope.badge only after the resource call. and use

 <div class="alert alert-warning" ng-hide="badges.length != 0">..

Plunker

Answer 2

Before badges is loaded, the variable is undefined. You can work around this problem by changing the ng-hide expression to ensure badges exists.

ng-hide="!badges || badges.length"