Set different hyperlink for same <a> tag (Using AngularJs)

Question

I have a very weird query. Searched a lot online but couldnot find a correct solution.

<ul class="dropdown-menu">
                    <li><a ng-model="data" href="Pre.html" target="_blank">Pre</a></li>
                    <li><a href="Post.html" target="_blank">Post</a></li>
</ul>

I have a simple dropdown menu with Pre and Post as its list in the dropdown. When user clicks Pre, pre.html page opens, when he clicks post, post.html page opens.

this is normal operation. Now i want to do this.

If user clicks on the hyperlink 'Pre', assuming $scope.data= fasle at the controller side, then Pre.html page should open once

if $scope.data = true, then instead of Pre.html, i want the hyperlink to open some other html. for e.g. block.html.

how to ensure that depending on the condition in controller, the particular html page should display.

<ul class="dropdown-menu">
                    <li><a ng-model="data" href="Pre.html OR Block.html" target="_blank">Pre</a></li>
                    <li><a href="Post.html" target="_blank">Post</a></li>
</ul>

As seen above href="Pre.html OR Block.html", means i want to show either of the two pages depending on the controller side data

Cosmin Ababei · Accepted Answer · 2016-04-04 21:17:55Z

2

You could use ngHref and write something like:

<a ng-href="{{ data ? 'Pre.html' : 'Block.html' }}" target="_blank">Pre or Block</a>

edited Apr 4, 2016 at 21:17

answered Apr 4, 2016 at 21:11

Cosmin Ababei

7,0722 gold badges22 silver badges35 bronze badges

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

2 Comments

Patrick Over a year ago

is the code wrong? irrespectvie of what the value of 'data' is, the 1st .html always get displayed.

Cosmin Ababei Over a year ago

Can you make sure that data really changes? Please see this fiddle and check the console to see the href changing.

austin665 · Accepted Answer · 2016-04-04 21:10:04Z

1

Why not have two different tags toggle able using ng-if based on the controller's value. You could do something like,

<li>
<a ng-if="data" ng-model="data" href="Block.html" target="_blank">Block</a>
<a ng-if="!data" ng-model="data" href="Pre.html" target="_blank">Pre</a>
</li>
<li><a href="Post.html" target="_blank">Post</a></li>

Then some logic in the controller to change from true to false.

answered Apr 4, 2016 at 21:10

austin665

914 bronze badges

Collectives™ on Stack Overflow

Set different hyperlink for same <a> tag (Using AngularJs)

2 Answers 2

2 Comments

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Linked

Related