Angularjs to pass multiple params

Question

I want to update status information for which I need to pass two params one is say school_id and other one is status which may be(approved, pending , declined) depending on the user clicks the button. I have a table like school_info with fields like id school_name status So in my applicationjs I need to pass two params id and status. here is my html code, I have ng-repeat so I am using school in schools.

<a href="#/changeStatus/{{school.id}}/approved"><button class="btn btn-success" ng-model="approve">Approve</button></a>
<a href="#/changeStatus/{{school.id}}/declined"><button class="btn btn-danger" ng-model="decline">Decline</button><a>
<a href="#/changeStatus/{{school.id}}/pending"><button class="btn btn-deafult" ng-model="Pending">Pending</button></a>

my app.js code is

var app=angular.module("admin",[]);
app.config(function ($routeProvider) {
  $routeProvider
    .when('/', {
      templateUrl: 'home.php',
      controller: 'adminCtrl'
    }).when('/changeStatus/:id/:sts',{
      templateUrl:'home.php',
      controller:'adminCtrl'
    }).when('/Mapview/:id',{
      templateUrl:'mapview.html',
      controller:'MapCtrl'
    }).otherwise({
      redirectTo: "/"
    });
});
app.controller("adminCtrl",function($scope,$http,$routeParams){
   var sts=$routeParams.status;
   var id=$routeParams.id;
   console.log("sts"+sts+id);
   //here I want two params to be fetched inside console log. when clicked on specific btn.I have seen previous questions asked on multiple params passing but there must be easy way out to get multiple params.
});

What is your question?

Ben Diamant
– Ben Diamant

2014-12-16 12:29:18 +00:00
Commented Dec 16, 2014 at 12:29 — Ben Diamant
– Ben Diamant, Commented Dec 16, 2014 at 12:29

Sudarshan Kalebere · Accepted Answer · 2014-12-16 12:46:26Z

1

Please use ng-href instead of href and your hrefs should be like as below, no need of :

<a ng-href="#/changeStatus/{{school.id}}/approved"><button class="bt......
<a ng-href="#/changeStatus/{{school.id}}/declined"><button class="btn btn...

then in the controller,

    var sts=$routeParams.sts;   // u need to get as sts , 
   //because you get it as sts in .when('/changeStatus/:id/:sts'..                          
    var id=$routeParams.id;
    console.log("sts"+sts);
    console.log("id"+id);

edited Dec 16, 2014 at 12:46

Sudarshan Kalebere

3,9473 gold badges36 silver badges66 bronze badges

answered Dec 16, 2014 at 12:31

Kalhan

21.9k8 gold badges71 silver badges96 bronze badges

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

4 Comments

Sudarshan Kalebere Over a year ago

How about getting values in appjs Is my code write for getting multiple params?

Sudarshan Kalebere Over a year ago

Yes correct Good one, but why to use ng-href I am getting with normal href

Kalhan Over a year ago

glad to help you, and note that use ng-href because {{school.id}} bind little time after the page renders. but there can have a situation when u clicking on the link {{school.id}} may not be ready, then your link is not working as u expected. using ng-href u can avoid that issue.

Kalhan Over a year ago

cheerz. happy coding :)

Josef Joe Samanek · Accepted Answer · 2014-12-16 12:41:06Z

Your links are not correct.

In AngularJS docs, they have this example:

// Given:
// URL: http://server.com/index.html#/Chapter/1/Section/2?search=moby
// Route: /Chapter/:chapterId/Section/:sectionId
//
// Then
$routeParams ==> {chapterId:'1', sectionId:'2', search:'moby'}

I didnt test it, but I think the only change you need to do is to remove the double-dots from your links, like this:

<a href="#/changeStatus/{{school.id}}/approved">
    <button class="btn btn-success" ng-model="approve">Approve</button>
</a>

And also, you have a mistake in your controller. You named the params 'id' and 'sts', but then you use 'id' and 'status'.

Sorry by mistake I put there insted of putting them in app code.

Collectives™ on Stack Overflow

Angularjs to pass multiple params

2 Answers 2

4 Comments

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

1 Comment

Related