Question

I have a website made with Angular where I want to change the name of the url when a certain option in a selectbox has been changed. Like this:

localhost:3000/plumber-in/amsterdam

And when the city "Utrecht" has been selected, the Url has to be changed to:

localhost:3000/plumber-in/utrecht

This is my selectbox:

<div class="plumber-by-city col-sm-12 home-text-col">
<div class="title-1">Seach by city</div>
<select ng-model="selectedItem" ng-change="change()" ng-options="item as item.city for item in items"></select><span class="fa fa-caret-down"></span>

In my app.js:

app.config(function($routeProvider, $locationProvider,$animateProvider) {
  $routeProvider

   .when('/plumber-in/:type', {
      templateUrl: 'partials/plumber-by-location.html',
      controller: 'DataCtrl'
   })
});

In my controller.js:

app.controller('DataCtrl', function($scope,$http,$routeParams){

   $scope.change = function() {
     $scope.type = $routeParams.type;
     console.log($scope.type);
     $rootScope = $scope.selectedItem.city;
     console.log($rootScope);
   };
});

Answer 1

快速且可行的解决方案

app.controller('DataCtrl', function($scope,$http,$location){
   $scope.change = function() {
       $location.path('/plumber-in/' + $scope.selectedItem.city);
   };
})

Change the name of url with Angular

1 个答案: