Как отобразить что-то, когда фильтрация медленная, используя 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%;
    }

ссылка на plunkr: http://plnkr.co/edit/NcbPPcxL1rk0ZBKpbqZG?p=preview

Источник

2 ответа

Не уверен, что это работает, но вы можете попробовать.

Добавить новый фильтр

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

Следите за скобками

Источник

Вам также может понадобиться создать собственную директиву для фильтрации информации, ng-фильтр по умолчанию работает медленно, потому что он проверяет все поля ваших объектов.

Вы можете создать пользовательскую директиву ng для фильтрации по вашим конкретным полям, посмотрите

Источник
Другие вопросы по тегам