AngularJS Change Single URL Parameter On Load If It Matches A Value

I'm working on a web app where parameters get passed to views as you navigate through the site. These parameters are set by user filters. I've hit a problem whereby some views don

Solution 1:

If you want to set a single search parameter you can do

$location.search(angular.extend($location.search(), {type: 'red'}))

Solution 2:

Ideally, for these kind of situation, $routeParams are used to extract the dynamic parameters entered in the url.

It works like this:

1. In the HTML page the Anchor tag where the URL is formed will add the dynamic parameter to the URL like this:

Here the {{ }} takes care of added the value of {{yourModelName.yourModelAttributeKeyName}} to the URL

2. Then in the $routeProvider configuration, in the .when() method, the path parameter of the URL must to set like in this case:

`myApp.config(function($routeProvider) { $routeProvider

.when('/showColor/:yourModelAttributeValue', {
    templateUrl : 'showColor.html'
});

});`

3. You can keep on adding parameters like :

and then also update the .when() method accordingly:

.when('/showColor/:yourModelAttributeValue/:yourModelAttributeAnotherValue', {
    templateUrl : 'showAnotherColor.html'
});

4. Finally in the controller, you can extract the :pathParams like :

   $scope.firstColor = $routeParams.yourModelAttributeValue;

   $scope.secondColor = $routeParams.yourModelAttributeAnotherValue;