I'm trying to display a list of elements only if it's not null or empty. To achieve this, I have used an ng-if before the ng-repeat block:
<tbody ng-if="adsNotEmpty">
<!-- Start: list_row -->
<tr ng-repeat="ad in ads">
<td>{{$index + 1}}</td>
<ad-thumbnail ad="ad"/>
</tr>
<!-- End: list_row -->
</tbody>
In my controller, there is code that checks the ads list and sets the adsNotEmpty variable accordingly:
controllers.controller('AdCtrl', ['$scope', 'AdService',
function($scope, AdService) {
$scope.ads = AdService.query();
$scope.adsNotEmpty = ($scope.ads && $scope.ads.length > 0);
}]);
Even though my RESTful webservice returns an empty response with a HTTP 200 OK status, resulting in adsNotEmpty being false, the ad-thumbnail directive still gets rendered:
Contents of the ad-thumbnail directive:
<td>
AD - {{ad.name}}
</td>
Consequently, "AD -" gets printed on the screen despite the ads list being empty.
The debug output for $scope.ads = AdService.query(); shows:
Array[0]
$promise: Object
$resolved: false
length: 0
__proto__: Array[0]
To resolve this issue, I have made the following changes:
In the controller:
controllers.controller('AdCtrl', ['$scope', 'AdService',
function($scope, AdService) {
AdService.query(function(data) {
$scope.ads = data;
$scope.adsNotEmpty = ($scope.ads.length > 0);
});
And in the page:
<tbody>
<!-- Start: list_row -->
<tr ng-repeat="ad in ads">
<td ng-if="adsNotEmpty">{{$index + 1}}</td>
<ad-thumbnail ad="ad" ng-if="adsNotEmpty"/>
</tr>
<!-- End: list_row -->
</tbody>