个人中心
gpt4 book ai didi

javascript - 从 AngularJS 中的 location.search 中删除项目

转载 作者：行者123 更新时间：2023-12-03 07:11:45 25 4
gpt4 key购买 nike

这里有很多像这样的问题，但到目前为止没有一个答案对我有帮助。

我已阅读 Angular $window和 $location文档，但我无法从我的客户端应用程序中实现我想要的目标。

假设我有一个网页，用户可以在其中设置多个过滤器并共享它们，共享通过 GET 参数进行 ?f=AN_HASH 这会触发对我的服务器的查询，该服务器会使用过滤器进行回复设置匹配传递的哈希值。

事件过滤器存储在 SessionStorage 中(通过 ngStorage 中的 $sessionStorage)。

最终用户可以通过按钮清除当前的过滤器设置。该按钮触发的预期流程应该是:

  • 清除 session 存储项
  • 清除网址查询参数?f=(我想删除这一参数，因为将来可能会有多个参数)
  • 重新加载页面

这是在 ng-click 上调用的函数:

$scope.clearFilters = function(){

    $sessionStorage.queryFilters = {} // Empty SessionStorage
    $scope.activeFilters = false      // Disable Clear button

    console.log('before:', location.search)

    // $location.search({})
    // $location.search('f', null)
    // $location.search('f', null).replace()

    console.log('after:', location.search)

    $window.location.reload() // reload the page
}

在两个console.log之间，您可以找到我迄今为止尝试过的内容。两个控制台日志打印以下内容:

before: ?f=THE_HASH
after: ?f=THE_HASH

显然没有任何改变..(地址栏中的 GET 查询仍然存在)

我尝试清空 location.search 对象，如下所示:

$scope.clearFilters = function(){

    $sessionStorage.queryFilters = {} // Empty SessionStorage
    $scope.activeFilters = false      // Disable Clear button
    location.search = ''              // Reset location.search and reload page
}

这确实有效，但我不喜欢它，因为它从 GET 查询中删除了所有元素，如果我需要添加更多不应以这种方式清理的参数，这可能会在将来导致问题..

<小时/>其他可以提供有关我的搜索背景的问题:

<小时/>正如 @Chris 建议我尝试启动: angular.element(document.body).injector().get('$location').search("f",null)

url GET 未受影响。附图中是我从 Chrome 控制台获得的内容。

Chrome console output

最佳答案

Plunker 和 Jsbin 似乎不喜欢更改 URL 参数，因此这里是复制粘贴到本地文件的代码。

<html lang="en" ng-app="myApp">
    <head>
      <base href="/">
      <meta charset="utf-8">
      <title>My AngularJS App</title>
      <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular.min.js"></script>
      <script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.3/angular-route.min.js"></script>
    </head>

    <body>
      <div ng-controller="myCtrl">
        <button ng-click="setFltr()">set filter</button>
        <button ng-click="clrFltrVal()">clear only the value</button>
        <button ng-click="clrFltrAll()">clear entire f filter</button>
      </div>
    </body>

    <script>'use strict';

angular.module('myApp', ['ngRoute']).config(
    ['$locationProvider', function ($locationProvider) {

  $locationProvider.html5Mode(true).hashPrefix('');
}]);

angular.module('myApp').controller('myCtrl', 
    ['$scope', '$location', '$window', 
    function ($scope, $location, $window) {

  $scope.setFltr = function () {
    $location.search('f', 'something');
    $window.location.reload();
  }

  $scope.clrFltrAll = function () {
    $location.search('f', null);
    $window.location.reload();
  }

  $scope.clrFltrVal = function () {
    $location.search('f', '');
    $window.location.reload();
  }
}]);


    </script>
</html>

关于javascript - 从 AngularJS 中的 location.search 中删除项目，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36593413/

25 4 0
文章推荐： javascript - HTML5 datetimepicker 插件 jquery
文章推荐： aws-cloudformation - 不允许使用无关 key [HealthCheck]
文章推荐： aws-cloudformation - AWS CloudFormation 中的更新堆栈和更改集有什么区别
文章推荐： javascript - 从 Django 中的 Javascript 表单访问 GET 表单数据
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com