使用后退按钮时,在角度控制器中恢复过滤状态?

时间:2018-05-02 14:42:22

标签: javascript angularjs

我的订单列表页面上有一个项目列表和一组过滤器选项(订单状态,订单号和日期),用于过滤项目。用户可以单击某个项目以查看该项目的详细信息页面。

当用户访问详细信息并单击其后退按钮时,它将返回列表,但过滤器选项将重置为默认值。

经过一些研究后,我知道我可以用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);
                    }
                );
            }]

1 个答案:

答案 0 :(得分:0)

我试过这种方式并且网址更改但是过滤列表已经消失,就像有人刷新页面一样

我将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并且无法正常工作