Angularjs 防止ng repeat在没有数据时显示图像

在我们的大多数有棱角的页面上，我们都遇到了这个恼人的错误，我们似乎找不到解决办法

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

代码正常，只有在ng repeat中没有数据时才会出现错误

vm.checkinTodayShowAll = false;

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

如果没有数据，我甚至会在页面上隐藏它

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

但它仍然希望渲染该图像

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

---

如何防止它在无需重复的情况下尝试渲染图像？

使用ng if而不是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>

使用ng if

---

在以下情况下使用ng而不是ng show：

而不是：

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

ng show：只隐藏仍在DOM中的视图。ng如果：删除 来自DOM的元素

它应该是：vm.checkinTodayShowAll.length>0而不是1

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

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

//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>