我可以使用 ngRoute 设置参数吗?

Can I set a parameter using ngRoute?

我正在制作一个显示项目列表的应用程序,然后可以通过多个过滤器来优化该列表。如果我要从 URL 字符串中获取这些选项的列表,那么这将允许访问者共享(或添加书签)link,从而将您带到过滤后的数据列表。但我的问题是如何将这些选项写入 URL 字符串?

所以想法是,一旦 select 元素被更改,就可以优化结果。比方说,这只是项目的顺序。

<select ng-model="order" ng-change="changeOrder()">
  <option ng-repeat="['date', 'amplitude', 'name'] as option">{{ option }}</option>
</select>

我想将该选项写入 URL 字符串,以便它现在包含(如果您 select 编辑了振幅)?order=amplitude。现在,如果您刷新页面,数据可以很容易地再次按振幅排序。

但是当有很多这样的过滤器和排序选项,并且它们都可以设置或重置为默认值时,将这些选项放在一起以检查字符串中是否已经存在一个选项就变得相当困难以免出现两次,如果没有其他选项,是否将其添加到 ? 后面,如果已经定义了其他选项,是否将其添加到 & 后面。

所以换句话说,我想知道的是 ngRoute 是否提供了设置参数的方法;不只是阅读它们?所以我可以做类似 $routeParams.set("order", "amplitude").

的事情

如果您想更改 URL,您应该通过 $location 服务来完成。

具体来说,$location.search(search, paramValue) 将允许您更改查询字符串值。

我做了一个 plunk,演示了使用 HTML5 模式和使用这些函数更改 $location。 It can be found here. In order to see the URL change, click the pop-out button .


您不必自己进行字符串解析。 AngularJS 也将允许您(具有相同的功能)查询当前设置的参数。因此,只需查询所有 URL 值,更改您要更改的过滤器的值,然后再将值设置回去。

这就是示例中第二个按钮所演示的内容。即使第一个按钮只会设置它自己的值(并删除其他值),第二个按钮也会保留所有其他项目。


相关代码:

var values = $location.search();
values.orderThatsUpdating = newOrderValue;
$location.search(values);