防止ng-repeat在沒有數據時顯示圖像

在我們的大多數角頁面上，我們都遇到了這個煩人的錯誤，我們似乎找不到解決方案。防止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-repeat？

來源

2017-07-03 torbenrudgaard

使用NG-如果不是NG-顯示

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

來源

2017-07-03 05:00:51 Sajeetharan

刪除元件應該是：'vm.checkinTodayShowAll.length> 0'不是1 – Ved

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

來源

2017-07-03 05:01:03 Aravind

使用ng-if而不是ng-show：

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

代替：

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

ng-show:只隱藏視圖它仍然在DOM中。
ng-if:從DOM

來源

2017-07-03 05:01:07 Ved

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

來源

2017-07-03 06:27:55

防止ng-repeat在沒有數據時顯示圖像

回答

相關問題