ng-repeat在顯示控制器的行之前顯示一行

我有一個後端服務，它將數據發送到$scope變量。我正在使用這個變量來填充表中的行，使用ng-repeat。ng-repeat在顯示控制器的行之前顯示一行

加載頁面時，瀏覽器會顯示一行，頁面加載完成後突然消失。有一段時間，當我檢索到數據時，所需的行按預期填充。

我想刪除第一行，因爲它看起來不好。

下面是代碼：

... 
<tr ng-repeat="row in rows"> 
    <td ng-bind="row.vname"></td> 
    <td ng-bind="row.mname"></td> 
    <td ng-bind="row.time_start"></td> 
    <td ng-bind="row.time_end"></td> 
    <td ng-if="row.progress!='-1'"> 
     <p class="btn-info btn-rounded" style="text-align: center; font-weight: bold;"> Complete</p> 
    </td> 
    <td ng-if="row.progress=='-1'"> 
     <p class="btn-danger btn-rounded" style="text-align: center; font-weight: bold;"> Failed</p> 
    </td> 
</tr> 
</tbody> 
...

它顯示在開頭的行顯示兩個圓形按鈕與文字「完全」和「失敗」。

來源

2017-04-26 Piyush Shrivastava

確保你的'$ scope.rows = []'當應用程序只是加載 – manish

@manish'$ scope.rows'在從後端渲染數據的函數中初始化。空行不顯示'$ scope.rows'的數據 –

您看到的行是在angularjs初始化之前構建的行。

您需要ng-cloak來隱藏它。

ng-cloak將隱藏它，直到角度啓動並運行。

像這樣：angularjs的

<tr ng-repeat="row in rows" class="ng-cloak"> 
    <td ng-bind="row.vname"></td> 
    <td ng-bind="row.mname"></td> 
    <td ng-bind="row.time_start"></td> 
    <td ng-bind="row.time_end"></td> 
    <td ng-if="row.progress!='-1'"> 
     <p class="btn-info btn-rounded" style="text-align: center; font-weight: bold;"> Complete</p> 
    </td> 
    <td ng-if="row.progress=='-1'"> 
     <p class="btn-danger btn-rounded" style="text-align: center; font-weight: bold;"> Failed</p> 
    </td> 
</tr>

有時Content-Security-Policy塊的能力添加ng-cloak類。在這種情況下，你需要將它添加在你的CSS這樣的：

[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak, .x-ng-cloak { 
    display: none !important; 
}

來源

2017-04-26 12:49:46

將'class =「ng-cloak」'添加到'tr'並不能解決問題。空白行仍在顯示。 –

確保你的css中有相應的css類。 '[ng \：cloak]，[ng-cloak]，[data-ng-cloak]，[x-ng-cloak]，.ng-cloak，.x-ng-cloak display：none！important; 「有時你必須自己添加它。 –

工作。您也可以將此添加到您的答案中。 –

-1

使用NG-斗篷爲隱藏，而你的應用程序加載。爲更多細節ng-cloak

<tr ng-repeat="row in rows" class="ng-cloak"> 
     <td ng-bind="row.vname"></td> 
     <td ng-bind="row.mname"></td> 
     <td ng-bind="row.time_start"></td> 
     <td ng-bind="row.time_end"></td> 
     <td ng-if="row.progress!='-1'"> 
      <p class="btn-info btn-rounded" style="text-align: center; font-weight: bold;"> Complete</p> 
     </td> 
     <td ng-if="row.progress=='-1'"> 
      <p class="btn-danger btn-rounded" style="text-align: center; font-weight: bold;"> Failed</p> 
     </td> 
    </tr> 
    </tbody>

來源

2017-04-26 13:00:23 Lakmi

ng-cloak沒有解決問題。我正在使用angularjs 1.6.3 –

[@Julien已經建議它]（http://stackoverflow.com/a/43634744/4927984），不要被迫複製/粘貼他的答案。 – Mistalis

對不起，其實我沒有複製其他答案，當我找到解決辦法，他也發現它相同 – Lakmi

另一個建議是添加屬性NG-如果tr標籤= 「行」

<tr ng-repeat="row in rows" ng-if="row"> 
...

來源

2017-04-26 13:04:48

ng-repeat在顯示控制器的行之前顯示一行

回答

相關問題