Как показать загрузочное сообщение перед фильтром с помощью AngularJS?

#javascript #angularjs #angular-filters

#javascript #angularjs #угловые фильтры

Вопрос:

Мне нужно показать некоторое «загрузочное сообщение», когда фильтр должен произойти с AngularJS. Мой фильтр работает быстро, поэтому я не могу просто показать его перед возвратом отфильтрованных данных. Мой код:

 .filter('filterName', function () {
    return function (pacotes, escopo) {
        var filtered = [];
        pacotes.forEach(function (pacote) {
            if (condition)
                filtered.push(pacote);
        });

        return filtered;
    }
})

Что я могу сделать, чтобы показать какое-либо сообщение, div, что угодно, прежде чем возвращать эти данные?

1. Если ваш фильтр настолько быстр, что вы не хотите просто отображать сообщение перед возвратом данных, зачем его вообще отображать?

2. Мой босс попросил об этом. ЛОЛ, я сказал, что в этом нет необходимости, но боссы есть боссы, верно? По его словам, он хочет «красивый загрузочный gif или что-то в этом роде».

3. Как и где вы вызываете этот фильтр

4. Ну, в таком случае первое, что я бы сделал в этом фильтре, это показать сообщение. Затем поместите код, в котором вы получаете данные, а также фрагмент, чтобы скрыть ваше загрузочное сообщение внутри функции $timeout, и установите его таким, какой вы хотите, чтобы отображалось загрузочное сообщение.

5. <div class="package col s4" dir-paginate="package in packages | filtroPacotes:this | itemsPerPage: 9"> {{content_here}} </div> Моя packages переменная берется из $ http.

Ответ №1:

Где-то в вашем html:

 <p id="loadingMessage" ng-show="showMessage"></p>

Фильтр:

 .filter('filterName', function () {
    $scope.showMessage = true;

    $timeout(return function (pacotes, escopo) {
        var filtered = [];
        pacotes.forEach(function (pacote) {
            if (condition)
                filtered.push(pacote);
        });
        $scope.showMessage = false;
        return filtered;
    }, 3000);    
})

Я не смог это протестировать, так как у меня нет всего вашего кода. Но что-то подобное должно работать, если у меня правильный синтаксис. Однако для этого вам придется ввести $scope и $timeout в соответствующие места.

Редактировать: я только что понял, что escopo, вероятно, означает область видимости на другом языке. Предполагая, что это правда, и вы действительно передаете область видимости, просто поместите escopo туда, где у меня есть $scope .

1. пользователь1289451, у меня есть это в моем html: <loading ng-hide="finalizado"></loading> это мой фактический фильтр: .filter('filtroPacotes', function ($timeout) { return function (pacotes, escopo) { var filtrados = []; pacotes.forEach(function (pacote) { if (condition) filtrados.push(pacote); }); escopo.finalizado = false; $timeout(function () { escopo.finalizado = true; }, 300); return filtrados; } })

2. Это работает? Или у вас есть проблемы с этим? Вы действительно не дали мне никакой информации, чтобы согласиться с вашим кодом…

3. Это работает не так, как написано. escopo является ли моя область действия контроллера переданной таким образом : package in packages | filtroPacotes:this . Но, похоже, эта строка escopo.finalizado = true не применяется к реальной области действия контроллера. Я пытался с escopo.$apply помощью, но это также не сработало