Using Angular 'ng-click' with 'ng-repeat' to create dynamic links

Question

I have a set up where I am trying to use my JSON object to create the URL strings in an ng-repeat. The text is viewable when inspected in the broswer, yet it doesn't work, or console log an error.

The HTML looks like this:

<div ng-repeat="project in projects">
  <div ng-click="go('/projects/{{project.url}}')"></div>
</div>

I parse the $location service in to my controller, and then use the following to change the page url (please note, I have checked this works using non-dynamic URLs in the view):

$scope.go = function (path) {
  $location.path(path);
};

An example of the JSON object I am using, looks like this:

$scope.projects = [
  {
    url: 'paul-davis'
  }
];

Remove the curly braces from project.url -- you're already writing in angular code within an ng-click (I think anyways, removed the answer until I'm sure) — tymeJV
– tymeJV, Commented Oct 31, 2013 at 13:22
Sorry, that just puts 'project.url' at the end of the URL string. — JohnRobertPett
– JohnRobertPett, Commented Oct 31, 2013 at 13:24
Weird...you shouldn't need to use {{}}...waaait, try this (removing some quotes) :: ng-click="go('/projects/'project.url)" — tymeJV
– tymeJV, Commented Oct 31, 2013 at 13:28

Nikos Paraskevopoulos · Accepted Answer · 2013-10-31 13:33:02Z

4

The code within ng-click is angular script, not template code to use {{...}}. Use it as:

<div ng-click="go('/projects/' + project.url)"></div>

answered Oct 31, 2013 at 13:33

Nikos Paraskevopoulos

40.4k13 gold badges91 silver badges99 bronze badges

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

2 Comments

ncbl Over a year ago

what about when you have the ng-click that accesses a method in the controller like <div ng-click="doMethod({{ myObject.id}})" >asdfasdf<div>? I just cannot get this to work... its driving me nuts!

raddrick Over a year ago

for anyone else... you dont need to use {{var}} inside of the ng-click

Mohamed NAOUALI · Accepted Answer · 2015-07-09 22:01:31Z

0

You can put an <a> tag with dynamic href inside of the ng-repeat, it works just as you'd expect - though using ng-href is better, so your links dont break before the data bindings are ready. you can have a look to this Angular tuto https://docs.angularjs.org/api/ng/directive/ngHref

answered Jul 9, 2015 at 22:01

Mohamed NAOUALI

2,1321 gold badge25 silver badges29 bronze badges

Collectives™ on Stack Overflow

Using Angular 'ng-click' with 'ng-repeat' to create dynamic links

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