Angular JS routing control with dynamic parameter passing

Question

I'm new to AgularJs, and I'm working on a single page application. I was stuck on a position where i need to send an dynamic id to next template (i.e /pagename&id= ) and that needs to be control using ng routing as well. Is there a way to handle routing url with this dynamic id value?

This is the code snippets that matters

//Controller function call here passing the dynami id on 'data-value'
<button type="submit" data-value="<dynami id>" ng-click="submit();">

//controller function
var app = angular.module('myApp', []);
var id = <Dynamic id>;
app.controller('galleryController', function($scope, $http, $location) {
    $scope.submit = function() {
        $location.path('/gallary-single&id='+id);
    }
});

//Routing...
app.config(function($routeProvider) {
        $routeProvider
        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })
        .when('/gallary', {
            templateUrl : 'pages/gallary.html',
            controller  : 'galleryController'
        })
        .when('/gallary-single', {
            templateUrl : 'pages/gallary-single.html',
            controller  : 'gallerySingleController'
        });
    });

check this question stackoverflow.com/questions/37130590/… please show some code but sure this will help you — Erez
– Erez, Commented Jul 11, 2016 at 6:27

Erez · Accepted Answer · 2016-07-11 07:09:11Z

2

you should try that

<button type="submit" ng-click="submit(_id);">

//var id = <Dynamic id>; --  no need for that
app.controller('galleryController', function($scope,  $location) {
  $scope._id = 'some-id';
    $scope.submit = function(id) {
        console.log('submit id:', id);
        $location.path('/gallary-single/' + id);
    }
});

//Routing...
app.config(function($routeProvider) {
        $routeProvider
        .when('/', {
            templateUrl : 'pages/home.html',
            controller  : 'mainController'
        })
        .when('/gallary', {
            templateUrl : 'pages/gallary.html',
            controller  : 'galleryController'
        })
        .when('/gallary-single/:id', {
            templateUrl : 'pages/gallary-single.html',
            controller  : 'gallerySingleController'
        });
    });

answered Jul 11, 2016 at 7:09

Erez

6041 gold badge7 silver badges24 bronze badges

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

1 Comment

Thiwanka Dodanwela Over a year ago

Thanks Erez for the help! This is what I was looking for... :)

Collectives™ on Stack Overflow

Angular JS routing control with dynamic parameter passing

1 Answer 1

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related