下拉列表更改时，AngularJS会更改URL中的参数值

Question

我有以下网址：

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

我的季度下降包含年度季度：全部，Q1，Q2，Q3，Q4

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

如何更改网址：

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

要：

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

当用户将下拉列表从Q2更改为全部时。

我附上了页面的定义：

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

Answer 1

使用select观看与ng-model下拉列表绑定的变量，然后使用$location根据需要更改网址。

<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/');
});