Angular js的过滤器保留过滤条件

Question

<div class="kmi-list__column head-controls hide" style="flex:1;">
                        <div class="filter" ng-show="dispatch_filterSH.op_name">
                            <input ng-model="dispatch_filter.op_name" id="op_name">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                               ng-click="dispatch_filterSH.op_name = false;dispatch_filter.op_name = '';">clear</i>
                        </div>
                        <div class="order" ng-hide="dispatch_filterSH.op_name">
                            <i class="material-icons search" style="z-index:1;" ng-click="dispatch_filterSH.op_name = true">search</i>
                            <label ng-bind="'B0219.list.column11' | translate"></label>
                        </div>
                    </div>

<div class="kmi-list__row" ng-repeat="data in dialog.plotData.workstation_detail | filter: dispatch_filter track by $index"  >

这段代码怎么可以在使用Angular js的过滤器的时候，如果在当前页面输入过滤条件，进入新页面再返回当前页面的时候，能保留刚刚的过滤条件？

Answer 1

【以下回答由 GPT 生成】

可以使用AngularJS的$rootScope来保存过滤条件并在导航回当前页面时恢复过滤条件。下面是一种可能的解决方案：

首先，将$rootScope注入到控制器中，并将过滤条件保存在$rootScope上，而不是在控制器的作用域上。在导航离开页面时，将过滤条件保存到本地存储（或会话存储）中。

app.controller('MyController', ['$scope', '$rootScope', function($scope, $rootScope) {
    // 在控制器中使用$rootScope而不是$scope
    $rootScope.dispatch_filter = {
        op_name: ''
    };

    // 在导航离开页面时保存过滤条件到localStorage中
    window.addEventListener('beforeunload', function() {
        localStorage.setItem('dispatch_filter', JSON.stringify($rootScope.dispatch_filter));
    });
}]);

接下来，在页面加载时，检查localStorage是否存在保存的过滤条件，并在其中找到并恢复它。

app.run(['$rootScope', function($rootScope) {
    // 在页面加载时恢复过滤条件
    var savedFilter = localStorage.getItem('dispatch_filter');
    if (savedFilter) {
        $rootScope.dispatch_filter = JSON.parse(savedFilter);
    }
}]);

最后，在HTML代码中，将dispatch_filter修改为$root.dispatch_filter，以便正确访问$rootScope中的过滤条件：

<input ng-model="$root.dispatch_filter.op_name" id="op_name">
<i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
   ng-click="$root.dispatch_filterSH.op_name = false;$root.dispatch_filter.op_name = '';">clear</i>

这样，当你导航回当前页面时，过滤条件将被恢复，并在输入框中显示。请注意，你需要在每个使用过滤器的页面上实施相同的逻辑。如果不希望使用localStorage，sessionStorage也是一个可行的替代方案。

希望这能帮到你！如果有任何进一步的问题，请随时提问。

【相关推荐】

• 请看👉 ：angularjs默认选中--包括省市联动的默认选中
• 除此之外, 这篇博客: AngularJs教程-快速入门中的 使用过滤器格式化数据 部分也许能够解决你的问题。

如果你已经解决了该问题, 非常希望你能够分享一下解决方案, 写成博客, 将相关链接放在评论区, 以帮助更多的人 ^-^