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

时间:2014-04-13 15:05:01

标签: javascript angularjs

我有以下网址:

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'               
                }

1 个答案:

答案 0 :(得分:3)

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