显示“正在加载”Div元素，直到列表已加载，然后隐藏Div元素

Show a "loading..." div element until list has loaded and then hide the div element

本文关键字：元素 加载 Div 列表 然后 隐藏 正在加载 显示      更新时间：2023-09-26

我在一个移动应用程序中有一个angularJs/firebase列表，它需要几秒钟才能加载。我想在那里放一个简单的div，说"列表正在加载…"，直到列表已经加载了项目。

我知道我必须使用ng-hide/ng-show方法，但我不知道该使用哪个表达式。我的列表在一个div内，而我的"Loading…"文本在另一个div中。我如何告诉"Loading…"div隐藏一旦列表被填充，而不是更早?

我知道这不是正确的做法，但它很简单，因为我所要做的就是隐藏一个元素并显示另一个。Beats使用某种形式的超时功能，这有时是不可预测的。至少这样，我确信用户不会感到困惑，直到列表实际加载。他们会知道正在加载

我使用离子框架，因此使用离子含量标签。

<ion-content id="content">
<div class="" ng-hide="loaded">
   "Loading...."
</div>
<ion-list show-delete="data.showDelete" 
show-reorder="data.showReorder" ng-model="loaded">
  <ion-item ng-repeat="client in clients|filter:search |orderBy:'name'"
      item="client"
      href="#/{{client.$id}}" class="item-remove-animate">
      <h2>{{client.name}}</h2>
      <h4>File #: {{client.fileNumber}}</h4>
      <ion-delete-button class="ion-minus-circled"
                          ng-click="removeClient(client)">
      </ion-delete-button>
      <ion-option-button class="button-assertive"
                          ng-click="edit(client)">
        Edit
      </ion-option-button>
      <ion-option-button class="button-calm"
                          ng-click="share(client)">
        Share
      </ion-option-button>
      <ion-reorder-button class="ion-navicon" on-reorder=
      "moveItem(client, $fromIndex, $toIndex)">
      </ion-reorder-button>
  </ion-item>
</ion-list>

当客户端数组有内容时隐藏加载器

<div class="" ng-hide="clients.length > 0">
   "Loading...."
</div>

显示客户端数组有内容时的列表

 <ion-list ng-show="clients.length > 0" show-delete="data.showDelete" 
    show-reorder="data.showReorder" ng-model="loaded">
...

我在这种情况下使用jQuery BlockUI Plugin [http://malsup.com/jquery/block/]

要隐藏div，使用属性

<div ng-hide="..." >

你要把它和列表的加载状态绑定。

这在一定程度上取决于您如何获取数据，对于一个简单的示例，您可以像这样封装您的列表:

var mydata = {};
mydata.values = [];
mydata.loading = true;
mydata.errormsg = "";

然后当你检索你的数据，设置加载状态和/或错误信息，这样你也可以显示错误信息，如果出现问题，同样的方式，例如

<div ng-show="mydata.loading">Loading...</div>
<div ng-show="mydata.errormsg != ''">Oh no...</div>
相关文章：