AngularJS change parameter value in URL when dropdown changed

Question

I have the following url:

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

And i have quarter dropdown contains year quarters: All, Q1, Q2, Q3, Q4

when user change the value of the dropdown i have a method set_selected_quarter called.

How can i change the url from :

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

To:

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

when user change the dropdown from Q2 to All.

I attached the defenition of the page:

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

Mikke · Accepted Answer · 2014-04-13 18:26:15Z

4

Watch a variable bound to the select dropdown with ng-model, then use $location to change the URL as appropriate.

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

Then in your controller:

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

answered Apr 13, 2014 at 18:26

Mikke

2,17717 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Liad Livnat Over a year ago

the thing is "/2063/23/true/1099/2014/" is dyanmic, how can i retrieve it and change "quarter" if the url is change on every page...

Mikke Over a year ago

You can read the current URL parameters by injecting $routeParams into the controller. Do a console.log($routeParams) to see what parameters are set. If you have this feature on every page, I would recommend creating a directive.

Liad Livnat Over a year ago

then i need to re-create the url from those parameters? how can i prevent the page from refresh itself?

Mikke Over a year ago

Yes, you'd need to re-create the URL. The $route will change and you will re-initialize the controller with the new route, but the page shouldn't refresh if you're using html5mode. If you don't want to re-initialize the controller, I would look at using search (see $route documentation).

Liad Livnat Over a year ago

well it is working but it still refresh the page, how can i ignore that?

Collectives™ on Stack Overflow

AngularJS change parameter value in URL when dropdown changed

1 Answer 1

5 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Related