Восстановить отфильтрованное состояние в угловом контроллере при использовании кнопки возврата?

У меня есть страница со списком заказов со списком элементов и набором параметров фильтрации (состояние заказа, номер заказа и дата) в верхней части страницы для фильтрации элементов. Пользователь может щелкнуть элемент, чтобы просмотреть страницу сведений об элементе.

Когда пользователь находится на детали и нажимает кнопку «Назад», он возвращается к списку, но со сбросом параметров фильтра на значения по умолчанию.

после некоторого исследования, чтобы знать, что я могу сделать это с помощью URL-адреса, проблема в том, что я не знаю, как это сделать. пожалуйста, помогите мне с этим.

мой контроллер

    function searchOrders() {
    $scope.isLoading = true;
    model.noData = false;
    model.isSearch = true;
    model.orders = {};
    QaDashboardService.searchOrders(model.filterByNumber, model.status, model.startFrom, model.startTo)
        .then(function (orders) {
            if (orders) {
                $scope.isLoading = false;
                model.orders = orders;
            }
        }).catch(function (error) {
        $scope.isLoading = false;
        model.noData = true;
    });
}

QaDashboardService.js

     function searchOrders(orderNumber, status, startFrom, startTo) {
        service.data = [];
        var deferred = $q.defer();
        var orderCollection = service.db.collection("orders");
        if (orderNumber) {

            orderCollection = orderCollection.where("number", "= = ", orderNumber);
        }
        if (status && status != "*") {

            orderCollection = orderCollection.where("status", "= = ", status);
        }
        if (startFrom && startTo) {
            startFrom = new Date(startFrom).getTime();
            startTo = new Date(startTo).getTime();
            orderCollection = orderCollection.where("created", "> = ", startFrom).where("created", "< = ", startTo);
        }

        orderCollection.get().then(function (querySnapshot) {
            if (!querySnapshot.empty) {
                querySnapshot.forEach(function (doc) {
                    service.data.push(doc.data());
                    deferred.resolve(service.data);
                });
            } else {

                deferred.reject("no data");
            }
        }).catch(function (error) {

            deferred.reject(error);

        });


        return deferred.promise;
    }

мой app.js

 .state('qa-dashboard.orders-list', {
        url: "/orders-list",
        module: "private",
        templateUrl: "app/qa-dashboard/orders/orders-list/orders-list.html",
        controller: 'OrdersListCtrl',
        role: ['admin', 'QA'],
        resolve: {
            "allOrders": ["QaDashboardService", '$rootScope', function (QaDashboardService) {
                return QaDashboardService.allOrders(40).then(
                    function (data) {
                        return data;
                    },
                    function (error) {
                        console.error("Error:", error);
                    }
                );
            }]
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
0
115
1

Ответы 1

Я пробовал этот способ, и URL-адрес изменился, но список фильтров исчез, как будто кто-то обновил страницу

я меняю URL-адрес в app.js, чтобы он был таким

   url: "/orders-list/:pageName"

Я применил эту функцию в QaDashboardService.js

        function openPage (pageName) {
        $state.go('qa-dashboard.orders-list',{'pageName':pageName});


    };

я назвал это в функции поиска

   function searchOrders(orderNumber, status, startFrom, startTo) {
        service.data = [];
        var deferred = $q.defer();
        var orderCollection = service.db.collection("orders");
        if (orderNumber) {

            orderCollection = orderCollection.where("number", "= = ", orderNumber);
        service.openPage(orderNumber);

        }
        if (status && status != "*") {

            orderCollection = orderCollection.where("status", "= = ", status);
        service.openPage(status);

        }


        if (startFrom && startTo) {
            startFrom = new Date(startFrom).getTime();
            startTo = new Date(startTo).getTime();
            orderCollection = orderCollection.where("created", "> = ", startFrom).where("created", "< = ", startTo);
        }

        orderCollection.get().then(function (querySnapshot) {
            if (!querySnapshot.empty) {
                querySnapshot.forEach(function (doc) {
                    service.data.push(doc.data());
                    deferred.resolve(service.data);
                });
            } else {

                deferred.reject("no data");
            }
        }).catch(function (error) {

            deferred.reject(error);

        });


        return deferred.promise;
    }

но это не сработало Я также пробовал $ location и тоже не работал

Другие вопросы по теме