Как отобразить что-то, когда фильтрация медленная, используя AngularJS
В угловом у меня есть таблица и окно поиска, где пользователь может напечатать, а угловой будет искать среди данных и отображать таблицу. Проблема в том, что у меня достаточно данных для замедления фильтрации, в этом случае я бы хотел отобразить счетчик:
Образец похож на мой 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 -->
Вопрос в том, как я могу отображать счетчик каждый раз, когда происходит фильтрация?
CSS для вращающегося div:
.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%;
}
ссылка на планкр:http://plnkr.co/edit/NcbPPcxL1rk0ZBKpbqZG?p=preview