Passing additional parameters in Angular

Question

I have a list of hotels and I am passing a URL friendly slug for the hotel in the parameter in the URL hotel/nice-hotel.

This is ok and fine.

I want to also pass the hotel ID to the next page but don't want pass it in the URL. What is the best way of doing this?

       .state('hotels', { 
            title: 'Hotels page',
            url: '/hotels',
            controller: 'HotelsController',
            templateUrl: 'app/components/hotels/hotelsView.html'
        })

        .state('hotel', { 
            title: 'Hotel page',
            url: '/hotel/:hotelName',
            controller: 'HotelController',
            templateUrl: 'app/components/hotel/hotelView.html'
            params:{hotelId:hotelId};
        })

The link I'm passing

<a type="button" ui-sref="hotel({hotelId:{{hotel.hotelId}},hotelName:{hotel.hotelName}})" href="/hotel/{{hotel.name | slugify}}" class="ach-hl-btn btn btn-warning">Select</a>

are you using ui-router?

Tarun Dugar
– Tarun Dugar

2015-12-22 09:11:00 +00:00
Commented Dec 22, 2015 at 9:11 — Tarun Dugar
– Tarun Dugar, Commented Dec 22, 2015 at 9:11
yes i'm using ui-router

ottz0
– ottz0

2015-12-22 09:11:30 +00:00
Commented Dec 22, 2015 at 9:11 — ottz0
– ottz0, Commented Dec 22, 2015 at 9:11
@ottz0: well, show your route for the "next page" then

Sergio Tulentsev
– Sergio Tulentsev

2015-12-22 09:12:08 +00:00
Commented Dec 22, 2015 at 9:12 — Sergio Tulentsev
– Sergio Tulentsev, Commented Dec 22, 2015 at 9:12

Tarun Dugar · Accepted Answer · 2015-12-22 09:14:26Z

1

Since you are using ui-router, you can use params:

.state('stateName', {
    //other config
    params: {
        id: id_value
    }
})

And you can access the value in your controller using $stateParams:

app.controller('Ctrl', ['$scope', '$stateParams', function($scope, $stateParams) {
    console.log($stateParams);
}]

edited Dec 22, 2015 at 9:14

answered Dec 22, 2015 at 9:13

Tarun Dugar

8,9938 gold badges50 silver badges81 bronze badges

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

1 Comment

ottz0 Over a year ago

how do I use it in the link. href="/hotel/{{hotel.name | slugify}}

Dagm Fekadu · Accepted Answer · 2015-12-22 10:02:56Z

0

.state('stateName', {
//other config
controller:stateNameControler,
params: {
    id: id_value
}})

this may raise some errors if you son't accept the stateParams in the controller of that state

app.controller('stateNameControler', ['$scope', '$stateParams', function($scope, $stateParams) {
console.log($stateParams);}]

If you don't want your params at the link,you can use params in the sateprovider like this

.state('playgame',{
            url: "/play",
            params:{ src     :null,
                     gameName:null} ,
            templateUrl: "partials/play.html",
            controller:'gamePlayController'
          })

Now on your corresponding controller

mainApp.controller('gamePlayController', ['$scope','$state','$http','Game','Facebook','$stateParams', function($scope,$state,$http,$Game,Facebook,$stateParams){
      var imageElement=document.getElementById("image");
      imageElement.src=$stateParams.src;
      // $scope.dagi=$stateParams.data;
      console.log($stateParams.gameName);
      $scope.goBack=function(){
        $state.go($stateParams.gameName);
      }


    }]);

In your mark up

<button ng-click="onClick()"></button>

and your function `

$scope.onClick(){$state.go('stateName',{'src':dataURL,'gameName':$scope.gameName}); }

edited Dec 22, 2015 at 10:02

answered Dec 22, 2015 at 9:30

Dagm Fekadu

6101 gold badge8 silver badges23 bronze badges

5 Comments

ottz0 Over a year ago

How do I use it in the link?

ottz0 Over a year ago

How do you use the link though? <a type="button" ui-sref="hotel({hotelId:{{hotel.hotelId}},hotelName:{hotel.hotelName}})" href="/hotel/{{hotel.name | slugify}}" class="ach-hl-btn btn btn-warning">Select</a>

Dagm Fekadu Over a year ago

oh okay you can call a function on button click and do this , inject $state, in the controller $state.go("stateName",{param:value,param:value}) I will update the answer for you

Dagm Fekadu Over a year ago

dont forget to inject $state

Dagm Fekadu Over a year ago

How does it go for you?

ottz0 · Accepted Answer · 2015-12-22 10:30:25Z

Seeing the hotel name was being passed in the URL, it is not needed in the params. It can still be accessed in the subsequent page using $stateParams

Using ui-router

       .state('hotels', { 
            title: 'Hotels page',
            url: '/hotels',
            controller: 'HotelsController',
            templateUrl: 'app/components/hotels/hotelsView.html
        })

        .state('hotel', { 
            title: 'Hotel page',
            url: '/hotel/:hotelName',
            controller: 'HotelController',
            templateUrl: 'app/components/hotel/hotelView.html',
            params:{
                hotelId:{key:'value'},
            }
        })

The link was passed using ui-sref

<a type="button" ui-sref="hotel({hotelId:hotel.hotelId, hotelName:hotel.name})" >Select</a>

This can be accessed in the controller of the hotel pages by using $stateParams

console.log($stateParams);

Collectives™ on Stack Overflow

Passing additional parameters in Angular

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related