javascript - 使用后退按钮时恢复角度控制器中的过滤状态？

Question

我在页面顶部有一个带有项目列表和一组过滤器选项（订单状态、订单号和日期）的订单列表页面，用于过滤项目。用户可以单击一个项目来查看该项目的详细信息页面。

当用户在详细信息上并单击其后退按钮时，它会返回到列表，但过滤器选项会重置为默认值。

在做了一些研究之后，我知道我可以用 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);
                    }
                );
            }]

标签： javascriptangularjs

Answer 1

我试过这种方式，url改变了，但过滤列表不见了，就像有人刷新页面

我将 app.js 中的 url 更改为这样

   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 也没有用