AngularJS change single URL parameter on load if i

Question

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't support a specific value from one of the filters, and where this happens the parameter needs to be reset to one out of two possibilities.

I've been using $location.search({ type: "blue" }) but I've realised that if there are other parameters in the url/on the view, these get removed in place for just the one that is set using that code.

Basically, on some views if the type parameter is all it needs to change to blue, and on others it would need to change to red.

Unfortunately this parameter is set in the link by the current filter that is applied, so its not as simple as just changing the href.

You can see here in this example I'm trying to change views that can only be set as red to red when coming from a view where blue was set (and in the link) using an array of paths.

for (let i = 0; i < redOnlyViews.length; i++) {
  if (newUrl.indexOf(redOnlyViews[i]) > -1 && type === "blue") {
      $location.path("/" + redOnlyViews[i]).search({type: "red"});
   }
 }

(this is inside a $rootScope.$on("$locationChangeStart", function (event, newUrl, oldUrl) function)

If there is a way of changing a parameter like this whilst not changing any of the other parameters that would be fantastic!

Hope this makes sense and thanks :)

changed things to colours for anonymity, I'm not mad :)

Answer 1

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

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

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