angularjs ng-if not empty for ng-repeat

Question

I have a list of elements I want to display only if not null and empty, and for that I placed a ng-if before a 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>

for that I have a controller code which evaluates the ads list and sets the adsNotEmpty var:

controllers.controller('AdCtrl', ['$scope', 'AdService',
  function($scope, AdService) {
    $scope.ads = AdService.query();
    $scope.adsNotEmpty = ($scope.ads && $scope.ads.length > 0);
  }]);

I have a RESTful webservice which currently returns HTTP 200 OK status with an empty response, even though the adsNotEmpty results to false the code enters inside of ad-thumbnail directive:

ad-thumbnail directive content:

<td>
AD - {{ad.name}}
</td>

the resulting HTML ends up printing AD - on the screen even though the ads list is empty.

the resulting object from

$scope.ads = AdService.query();

shows on debug:

Array[0]
$promise: Object
$resolved: false
length: 0
__proto__: Array[0]

What could be wrong with the code above to prevent angular from rendering the ad-thumbnail directive ?

I am posting the solution here for reference:

in controller:

controllers.controller('AdCtrl', ['$scope', 'AdService',
  function($scope, AdService) {

    AdService.query(function(data) {
        $scope.ads = data;
        $scope.adsNotEmpty = ($scope.ads.length > 0);
    });

and in 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>

PSL · Accepted Answer · 2014-08-26 03:04:31Z

3

The log shows you that you are not looking at what you should. You need to chain through the $promise returned by the Query, before looking for data.

   AdService.query().$promise.then(function(data) {
       $scope.ads = data;
       $scope.adsNotEmpty = ($scope.ads && $scope.ads.length);
   });

ng-repeat at tha instance is iterating through the properties of the object returned by Query hance you see blank AD-

answered Aug 26, 2014 at 3:04

PSL

124k21 gold badges257 silver badges243 bronze badges

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

2 Comments

guilhebl Over a year ago

I tried your solution now I get a $promise Object with $resolved: true but the resulting HTML still renders ad-thumbnail directive so it still goes inside that block

guilhebl Over a year ago

it seems strange I thought th ng-if would not render any of the child nodes inside that HTML element, so only after placing the ng-if directly on the ad-thumbnail directive it worked, anyway thanks for pointing the $promise tip it helped clarify the actual flow.

Alagarasan M · Accepted Answer · 2014-08-26 13:38:17Z

2

Try this:

<tbody ng-if="ads.length > 0">

    <!-- Start: list_row -->
    <tr ng-repeat="ad in ads">
      <td>{{$index + 1}}</td>
       <ad-thumbnail ad="ad"/>
     </tr>                   
    <!-- End: list_row -->

</tbody>

answered Aug 26, 2014 at 13:38

Alagarasan M

9078 silver badges16 bronze badges

Collectives™ on Stack Overflow

angularjs ng-if not empty for ng-repeat

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related