顯示“ loading…” div元素，直到列表已加載，然后隱藏div元素

Question

我在移動應用程序中有一個angularJs / firebase列表，加載需要花費幾秒鍾。 我想在其中放置一個簡單的div，上面寫着“列表正在加載...”，直到列表中已加載了項。

我知道我必須使用ng-hide / ng-show方法，但是我不知道要使用什么表達式。 我的列表位於一個div內，而我的“正在加載...”文本位於另一個div中。 如何在列表填充后而不是更早地告訴“ Loading ...” div隱藏？

我知道這樣做不是正確的方法，但是它很簡單，因為我要做的就是隱藏一個元素並顯示另一個元素。 使用某種形式的超時功能進行拍打，有時這是無法預測的。 至少以這種方式，我確定在列表實際加載之前，用戶不會感到困惑。 他們實際上會知道它的負載。

我正在使用離子框架，因此使用了離子含量標簽。

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

Answer 1

當clients數組包含內容時，隱藏加載程序

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

Answer 2

要隱藏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>

Answer 3

在這種情況下，我使用jQuery BlockUI插件[ http://malsup.com/jquery/block/ ]。