AngularJS下拉框变化时如何修改URL中的参数值

Question

我有以下网址:

http://mywebsitre.com/mainpage/2063/23/true/1099/2014/Q2/0/

我有一个包含年度季度的下拉列表：全部、第一季度、第二季度、第三季度、第四季度。

当用户更改下拉列表的值时，我会调用一个名为set_selected_quarter的方法。

我该如何将页面URL从以下内容更改：

http://mywebsitre.com/mainpage/2063/23/true/1099/2014/Q2/0/

To:

http://mywebsitre.com/mainpage/2063/23/true/1099/2014/All/0/

当用户将下拉菜单从Q2更改为All时。

我附上了页面的定义：

.when('/mainpage/:client_id/:publisher_id/:is_agency/:agency_id?/:filter_year?/:filter_quarter?/:filter_advertiser?/', {
                templateUrl: '/partials/mainpage.html',
                controller: 'MainPageCtrl',
                title:'mainpage'               
                }

- Liad Livnat

Answer 1

使用ng-model绑定到select下拉列表中的变量，然后使用$location根据需要更改URL。

<select ng-model="quarter">
    <option value="all">All</option>
    <option value="q1">Q1</option>
    <option value="q2">Q2</option>
    <option value="q3">Q3</option>
    <option value="q4">Q4</option>
</select>

然后在你的控制器中：

$scope.$watch('quarter', function(quarter) {
    if (!quarter) {
        return;
    }
    $location.path('/2063/23/true/1099/2014/' + quarter + '/0/');
});

- Mikke

---

问题是"/2063/23/true/1099/2014/"是动态的，如果URL在每个页面上更改，我该如何检索它并更改"quarter"？ - Liad Livnat

您可以通过将$routeParams注入控制器来读取当前URL参数。执行console.log($routeParams)以查看设置的参数。如果您在每个页面上都有此功能，我建议创建一个指令。 - Mikke

那我需要根据这些参数重新创建URL吗？如何防止页面自动刷新？ - Liad Livnat

是的，您需要重新创建URL。$route将更改，并使用新路由重新初始化控制器，但如果您正在使用html5mode，则页面不应刷新。如果您不想重新初始化控制器，我建议查看使用search（请参阅$route文档）。 - Mikke

它能够工作，但仍然会刷新页面，我该如何忽略它？ - Liad Livnat