AngularJS : How to pass multiple parameters to controller through ng-href?

Question

I've a table containing edit button to update the record. When I'm passing single id to ng-href its working fine and opening form page:

Ex: In my index.html table

<a class="btn btn-warning" ng-href="#/provider/{{row._id}}">Edit</a>

But I want to pass one more parameter along with row._id to ng-href like:

<a class="btn btn-warning" ng-href="#/provider/{{row._id}}/collectionName/{{collectionName}}">Edit</a>

Its not working and redirecting to home page.

Here's my controller:

    $timeout(function () {
        if ($routeParams.id !== undefined) {                
            $http.get('/providerlist/'+$routeParams.id, {
                params:{
                    id:$routeParams.id, 
                    collectionName:$routeParams.collectionName
                }
            }).success(function (response) {
                alert(response);
                $scope.providerList = response;
                $scope.id = response['_id'];
            });
        }
    });

app.js for routing:

var ProviderApp = angular.module('ProviderApp', ['ngRoute'])
.config(['$routeProvider', function ($routeProvider) {
    $routeProvider
    .when('/home', {
        templateUrl: 'templates/home/index.html',
        controller: 'HomeController',
        controllerAs: 'home'
    })

    .when('/provider', {                            
        templateUrl: 'templates/provider/index.html',
        controller: 'ProviderController',
        controllerAs: 'provider'
    })                        
    .when('/provider/:id', {                            
        templateUrl: 'templates/provider/form.html',
        controller: 'ProviderController',
        controllerAs: 'provider'
    })                        
    .otherwise({
        redirectTo: '/home'
    });
}]);

Here what exactly I want to do is after clicking on edit button it should redirect to form.html with parameter/data of id and collectionName

Any help would be appreciated.

Solution 1

If you want to use multiple params in ng-href you should also update your route url in app.js.

when you used multiple parameters in ng-href but no route matching with this route then worked otherwise route that redirect to home.

you can try it.

in html:

<a class="btn btn-warning" ng-href="#/provider/{{row._id}}/collectionName/{{collectionName}}">Edit</a>

add a route in app.js like

.when('/provider/:id/collectionName/:cName', {                            
        templateUrl: 'templates/provider/form.html',
        controller: 'YourController'
    });

and in controller need to change like:

 $http.get('/providerlist/'+$routeParams.id +'/collectionName/'+ $routeParams.cName)
 .success(function (response) {
     alert(response);
     $scope.providerList = response;
     $scope.id = response['_id'];
 });

so server side route should be like: /providerlist/:id/collectionName/:cName

Solution 2

The path in ngRoute path can contain named groups starting with a colon and ending with a star like :name* , All characters are eagerly stored in $routeParams under the given name when the route matches.

For example, routes like : /color/:color/largecode/:largecode*/edit

For this sample URL : /color/brown/largecode/code/with/slashes/edit

And extract:

color: brown

largecode: code/with/slashes.

So in your case it the Route will be

.when('/provider/:id*\/collectionName/:collectionName*\', {                            
        templateUrl: 'templates/provider/form.html',
        controller: 'ProviderController',
        controllerAs: 'provider'
    })   

This will ensure that even if there are special characters and forward slashes in your resultant href link you are redirected to proper controller and page...

Comments

[damitj07]

you need to change the '/provider/:id'...to something like ...'/provider/:id/collection/:collectionName' and then use those param in controllers... using $routeParams....

[J.K.A.]

@damitj07: I tried .when('/provider/:id/collection/:collectionName', { templateUrl: 'templates/provider/form.html', controller: 'ProviderController', controllerAs: 'provider' }) but its not working

[damitj07]

I think that is because you have two roues /provider/... with same name...

[J.K.A.]

@damitj07: Yes.. but both are different. 2nd one is taking parameter 1st one is not

[damitj07]

yes But I think as you are mapping multiple routes.. to same controller function..there might a be an issue in parameter handling.. you can try to modify one of them and check if it works...

[J.K.A.]

@damitj07: I tried by changing name from providerlist to collectionlist but still problem persist

[damitj07]

NO I mean try commenting the .when('/provider', { templateUrl: 'templates/provider/index.html',..... and then change the below one to what I said before..to check if that works..then you may know what the issue ..is ...

[J.K.A.]

@damitj07: same issue :(

[damitj07]

can you post sample url your hitting

[J.K.A.]

@damitj07: url is the same which I've posted for edit button

[J.K.A.]

This One: <a class="btn btn-warning" ng-href="#/provider/{{row._id}}/collectionName/{{collectionN‌​ame}}">Edit</a>

[J.K.A.]

Now I've changed name provider to collectiondata : <a class="btn btn-warning" ng-href="#/collectiondata/{{row._id}}/collectionName/{{colle‌​ctionName}}">Edit</a‌​>

[damitj07]

I mean an actual url which is getting hit ...when you press Edit in your address bar..If it containes forward slash ..then that might be an issue..

[J.K.A.]

@damitj07: This is actual url before hitting edit button : http://localhost:1000/#/provider and when I click on edit button it goes into : http://localhost:1000/#/home

[J.K.A.]

@damitj07: is it possible using ng-click if not with ng-href?

[damitj07]

that is because the ngRoute redirects to home..if it encounters any invalid url... as you have defined in your router config... ok.. Can you send what is data in {{row._id }} and {{collectionName}}

[damitj07]

Yes you can use ng-click...but even in that case you have to form a proper URL to get to page you want..

[J.K.A.]

Wrote exactly like this but its not working.. what should I write in controller after this?

[J.K.A.]

ohh great.. that's what I was missing.. updated my code and its working now.. thanks shaishab..!!!