我在移动应用中有一个angularJs / firebase列表,加载需要几秒钟。我想在那里放一个简单的div,说“List is loading ...”,直到列表加载了这些项目。
我知道我必须使用ng-hide / ng-show方法,但我不知道要使用什么表达式。我的列表在一个div内,我的“Loading ...”文本在另一个div中。一旦填充了List,我怎么告诉“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>
答案 0 :(得分:3)
在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">
...
答案 1 :(得分:1)
要隐藏您的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>
答案 2 :(得分:1)
我在这种情况下使用jQuery BlockUI插件[http://malsup.com/jquery/block/]。