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

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.

Answers:

Answer

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

Answer

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...

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.