在 AngularJS 中找不到显示页面加载的数据

Question

我正在显示一些数据，因此在加载页面时，"未找到数据"控件正在工作，我应该怎么做才能防止这种情况？这是我的代码

 <ul id="owl-example" class="list-unstyled topContributors">
                    <li ng-show="TopContributors.length==0">
                        <p><span style="color: red; font-weight: bold;">No Contributors....</span></p>
                    </li>
                    <li ng-repeat="contributors in TopContributors">
                        <img ng-src="{{contributors.AccountName}}" />
                        <div class="contName">
                            <p>{{contributors.UserName}}</p>
                        </div>
                    </li>
                </ul>

Answer 1

您可以添加标志来隐藏"无贡献者..."。直到请求未完成

<li ng-show="TopContributors.length==0 && flag">
  <p><span style="color: red; font-weight: bold;">No Contributors....</span></p>
</li>

Answer 2

我认为

下面的代码足以实现您想要的，而不是添加一个标志：

<li ng-show="TopContributors && TopContributors.length==0">

Answer 3

在你的控制器中（用 es6 编写，但你得到漂移）：

export default class MyController extends Base {
  constructor() {
    super(arguments);
    this.loading = true;
    this.loadData();
  }
  loadData() {
    // Assumes data loaded correctly;
    someCodeLoadingData();
    this.loading = false;
  }
}

在您的模板中：

<li ng-show="TopContributors.length === 0 && vm.loading === false">
  <p>No Contributors....</p>
</li>

将您的样式放在样式表中，保持模板干净。vm（至少在我的情况下）来自我们的基地，其中 vm = this;

Answer 4

在数据不是来自使用 AJAX 调用的 API 的情况下，使用 ng-cloak 来实现此目的。基本上，它将等待变量加载，然后再对该div或元素执行任何函数将 ng-cloak 添加到您的 ng-show 语句中，如下所示：

<ul id="owl-example" class="list-unstyled topContributors">
    <li ng-show="TopContributors.length==0" ng-cloak>
        <p><span style="color: red; font-weight: bold;">No Contributors....</span></p>
    </li>
    <li ng-repeat="contributors in TopContributors">
        <img ng-src="{{contributors.AccountName}}" />
        <div class="contName">
            <p>{{contributors.UserName}}</p>
        </div>
    </li>
</ul>

在 css 文件中写入：

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

如果它使用 AJAX 调用，则可以在调用正在进行时设置标志，并在成功时更新它。

Answer 5

这里的通常建议建议为加载状态添加一个变量。我认为你甚至不需要那个。

除了添加 ng-cloak 以避免模板加载闪烁之外，我建议您将 TopContributors 变量默认为负值，这种方式将确保您的div 在您等待它加载时不会显示（从后端服务我假设）。例：

function topContributorsController(...) {
    $scope.TopContributors = -1; // 'not loaded' state

这是对模板的更改以添加ng-cloak：

<ul id="owl-example" class="list-unstyled topContributors" ng-cloak>