javascript - ng-repeat 在从 Controller 渲染行之前显示一行

Question

我有一个后端服务，可以将数据发送到 $scope 变量。我使用此变量通过 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>
...

显示在开头的行显示了两个带有文本“完成”和“失败”的圆形按钮。

Answer 1

你看到的那一行是在angularjs初始化之前构建的一行。

你需要ng-cloak隐藏它。

ng-cloak 会隐藏它直到 angular 启动并运行。

像这样:

<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阻止 angularjs 添加 ng-cloak 类的能力。在这种情况下，您需要像这样将其添加到您的 css 中:

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