使用AngularJS过滤缓慢时如何显示内容 [英] How to display something when filtering is slow using AngularJS
问题描述
在angular中，我有一个表和一个搜索框，用户可以在其中键入和输入angular，它将在数据中搜索并显示一个表.问题是我有足够的数据使过滤速度变慢，在这种情况下，我想显示一个微调器:
In angular I have a table and a search box where user can type and angular will search among the data and display a table. The problem is that I have enough data that filtering can get slowed down, in this case, I would like to display a spinner:
类似于我的html的示例:
Sample similar to my html:
<body ng-controller="MainCtrl">
Search: <input ng-model="searchText">
<table id="searchTextResults">
<tr><th>Name</th><th>Phone</th><th>Address</th><th>City</th><th>Zip</th><th>Country</th></tr>
<tr ng-repeat="friend in friends | filter:searchText">
<td>{{friend.name}}</td>
<td>{{friend.phone}}</td>
<td>{{friend.address}}</td>
<td>{{friend.city}}</td>
<td>{{friend.zip}}</td>
<td>{{friend.country}}</td>
</tr>
</table>
<div class='myspinner' > <!-- display only if filtering is occurring -->
问题是，每次发生过滤时如何显示微调器?
The question is, how can I display a spinner each time that filtering is occurring?
微调div的CSS:
.myspinner {
position: absolute;
left: 45%;
top: 45%;
height:50px;
width:50px;
margin:0px auto;
position: absolute;
-webkit-animation: rotation .6s infinite linear;
-moz-animation: rotation .6s infinite linear;
-o-animation: rotation .6s infinite linear;
animation: rotation .6s infinite linear;
border-left:6px solid rgba(0,170,240,.25);
border-left: 6px solid rgba(0,170,240,.25);
border-right: 6px solid rgba(0,170,240,.25);
border-bottom: 6px solid rgba(0,170,240,.25);
border-top: 6px solid rgba(0,170,240,.6);
border-radius:100%;
}
链接到plunkr: http://plnkr.co/edit/NcbPPcxL1rk0ZBKpbqZG?p=preview
link to plunkr: http://plnkr.co/edit/NcbPPcxL1rk0ZBKpbqZG?p=preview
推荐答案
不确定是否可行，但是您可以尝试.
Not sure if it works but you can try.
添加新的过滤器
app.filter('ngRepeatFinish', function($timeout){
return function(data){
var me = this;
var flagProperty = '__finishedRendering__';
if(!data[flagProperty]){
Object.defineProperty(
data,
flagProperty,
{enumerable:false, configurable:true, writable: false, value:{}});
$timeout(function(){
delete data[flagProperty];
me.$emit('ngRepeatFinished');
},0,false);
}
return data;
};
})
控制器中的新功能
$scope.$on('ngRepeatFinished', function(ngRepeatFinishedEvent) {
$scope.showSpinner = false;
$scope.$apply();
});
还有您的HTML
<tr ng-repeat="friend in (friends | ngRepeatFinish)"
记住括号
这篇关于使用AngularJS过滤缓慢时如何显示内容的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
