CODEWITHSUNDEEP
angularjs
torbenrudgaard
torbenrudgaard

Reputation: 2551

prevent ng-repeat from showing images when there is no data

On most of our angular pages we got this annoying error and we cant seem to find a solution.

GET http://localhost:8080/img/flagNations/%7B%7B%20bookings.language%20%7D%7D.png 404 (Not Found)

The code is ok, and the error only appears when there is no data in ng-repeat.

vm.checkinTodayShowAll = false;

if (res.checkinToday.length) {
  vm.checkinTodayShowAll = true;
  vm.checkinToday = res.checkinToday; 
}

and on the page I even hide it if there is no data...

<table class="start-table start-checkin-table" ng-show="vm.checkinTodayShowAll">

But still it wants to render that image

<tr ng-repeat="bookings in vm.checkinToday" class="start-text">
  <td class="start-left start-border overflow">
    <img src="./img/flagNations/{{ bookings.language }}.png" class="start-flag">
  </td>
</tr>

How do we prevent it from trying to render the image when there is nothing to ng-repeat?

Upvotes: 0

Views: 62

Answers (4)

Nainish Modi
Nainish Modi

Reputation: 488

//Try this one and it will boost performance also
<table class="start-table start-checkin-table" ng-if="vm.checkinTodayShowAll.length">  
<tr ng-repeat="bookings in vm.checkinToday track by $index" class="start-text">
<td class="start-left start-border overflow">
    <img src="./img/flagNations/{{ bookings.language }}.png" class="starflag">
</td>

Upvotes: 1

Ved
Ved

Reputation: 12093

Use ng-if instead of ng-show:

<table class="start-table start-checkin-table" ng-if="vm.checkinTodayShowAll.length>0">

instead of:

<table class="start-table start-checkin-table" ng-show="vm.checkinTodayShowAll">

ng-show: Just hides the view It is still in DOM .
ng-if: Remove element from DOM

Upvotes: 3

Sajeetharan
Sajeetharan

Reputation: 222572

Use ng-if instead of ng-show

<table class="start-table start-checkin-table"  ng-if="vm.checkinTodayShowAll.length > 0">
 <tr ng-repeat="bookings in vm.checkinToday" class="start-text">
    <td class="start-left start-border overflow">
        <img src="./img/flagNations/{{ bookings.language }}.png" class="start-flag">
    </td>
 </tr>

Upvotes: 2

Aravind
Aravind

Reputation: 41553

Use ng-if 

<tr ng-repeat="bookings in vm.checkinToday" class="start-text">
    <td class="start-left start-border overflow">
        <img src="./img/flagNations/{{ bookings.language }}.png" ng-if="vm.checkinToday.length > 0" class="start-flag">
    </td>
 </tr>

Upvotes: 2

Related Questions