dynamically change the path of href angular JS

Question

I am trying to change the href value on click of it.

This is what I have tried.

HTML:

<a href="#Page1">Demo</a>

JS:

    angular.config(function ($routeProvider) {
        $routeProvider
    .when('/Page1', {
            templateUrl: 'main.html'
            controller: 'FirstController'
        })
 .when('/Page2', {
            templateUrl: 'sub.html'
            controller: 'FirstController'
        })
.otherwise('main.html');

How do I change the path of the anchor tag everytime when I clicked on it.

Can anyone please help me out.

You should use ng-href to change the value of an href attribute. This will automatically change the href when your controller value changes. — drew_w
– drew_w, Commented Jun 23, 2014 at 12:30

s.alem · Accepted Answer · 2014-06-23 12:35:13Z

5

Use different controllers for each page. You can use a variable for link and set it in the related controller. For example:

<a href="#/{{myLink}}">Demo</a>

or

<a ng-href="#/{{myLink}}">Demo</a>

And in the each related controller:

$scope.myLink="page1";

or

$scope.myLink="page2";

etc.

Or if you insist to use same controller, you can check the location path:

if ($location.path().substring(1) == "page1") {
    $scope.myLink="page2";
}

edited Jun 23, 2014 at 12:35

answered Jun 23, 2014 at 12:28

s.alem

13.2k9 gold badges47 silver badges75 bronze badges

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

2 Comments

drew_w Over a year ago

Its similar, but ng-href is a slightly better option!

Julix Over a year ago

not that useful without explaining or linking to an explanation for why it's a better option... - nevermind, just found it in a comment above and the other solution below.

btk · Accepted Answer · 2015-05-05 17:11:30Z

3

Use ng-href instead - it will automatically update when the bound value changes.

answered May 5, 2015 at 17:11

btk

3,2352 gold badges31 silver badges30 bronze badges

Collectives™ on Stack Overflow

dynamically change the path of href angular JS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related