How to pass selected id in url through AngularJS routing and get data in console.log?

Question

Im Passing Selected Car Id in Url and trying to get data in console.log don't know where i'm missing may be i'm confused checking too much solution in stackoverflow - here is my code :

//Controller.js

     $scope.chooseACar = function(selectCarId)
            { 
               $scope.selectCarId = $stateParams.selectCarId;
                console.log($scope.selectCarId);
            }

//App.js

    .state('main.step3', 
    {
        url: '/step2/:selectCarId',
        templateUrl: 'pages/step3.html'
    });

//services.js

get: function(selectCarId) {
    for (var i = 0; i < carListData.length; i++) {
      if (carListData[i].id === parseInt(selectCarId)) {
        console.log(carListData[i]);
        return carListData[i];
      }
    }
    return null;
  }

// HTML Code

<a type="submit" href="#/main/step2/{{selectCarList.id}}" class="button button-yellow button-full submitBtn" style="color:#000; display:block">CHOOSE A CAR</a>

Ujjwala Bollam · Accepted Answer · 2017-11-21 08:43:31Z

2

In App.js (if you are getting ID in url no need to modify.)

.state('main.step2', {
    name: 'slectcarID'
    url: '/step2/:selectCarId',
    templateUrl: 'pages/step3.html'
});

and to get the data in controller use $stateParams

console.log($stateParams.selectCarId);

or

$scope.selectCarId = $stateParams.selectCarId;
console.log($scope.selectCarId);

Try either only ng-click or ui-sref

edited Nov 21, 2017 at 8:43

answered Nov 21, 2017 at 5:06

Ujjwala Bollam

1599 bronze badges

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

9 Comments

Tarun Kumar Over a year ago

Getting Undefined Value!!

Ujjwala Bollam Over a year ago

Is the ID getting appended in URL ?

Ujjwala Bollam Over a year ago

Hey try removing ng-href="#/main/step2/{{selectCarList.id}}" in your HTML. and check if selectCar value is getting pased in chooseAcar function.

Tarun Kumar Over a year ago

I removed ng-href. Now button is not working !! its not getting clicked

Ujjwala Bollam Over a year ago

Are you sure you want it <a> tag ? Please change a to div tag or just remove ng-click from the html and try

|

skdonthi · Accepted Answer · 2017-11-21 07:32:57Z

0

Try using ui-sref instead of href

HTML

<a type="submit" ui-sref="main.step3({carId : selectCarList.id})"
   class="button button-yellow button-full submitBtn" 
   style="color:#000; display:block">CHOOSE A CAR
</a>

App.js

.state('main.step3', 
{
    url: '/step2/:selectCarId',
    templateUrl: 'pages/step3.html',
    controller: `Your Controller Name`,
    params: { carId: null, }
});

Controller

$scope.chooseACar = function(){ 
                                  $scope.selectCarId = $stateParams.carId;
                                  console.log($scope.selectCarId);
                              }

edited Nov 21, 2017 at 7:32

answered Nov 21, 2017 at 7:13

skdonthi

1,4721 gold badge22 silver badges38 bronze badges

6 Comments

Tarun Kumar Over a year ago

Do i need to define controller again. i mean i already define main controller and I don't want to define it again.

skdonthi Over a year ago

No need, in your controller it self.

Tarun Kumar Over a year ago

so you define controller here do i put my controller name .state('main.step3', { url: '/step2/:selectCarId', templateUrl: 'pages/step3.html', controller: ctrl, params: { carId: null, } });

skdonthi Over a year ago

in app.js along with url,templateUrl include controller and params

skdonthi Over a year ago

here controller means, the name of the controller from which view is rendering

|

Collectives™ on Stack Overflow

How to pass selected id in url through AngularJS routing and get data in console.log?

2 Answers 2

9 Comments

HTML

App.js

Controller

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

9 Comments

HTML

App.js

Controller

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related