Angular JS - dynamically add href links to icons using ng-repeat

Question

I'm trying to use angular to create a table of different videos that are organized by topic, date, presenter and also are tagged.

I've used ng-repeat to repeat over my array of objects to produce a table.

However, how can I dynamically change the href link for the play button?

In the jsfiddle below, I've added a static row of what each should look like. the first column has a fontawesome icon that is linked to a video. How can I edit the function so that the href link is updated in the ng-repeat?

http://jsfiddle.net/jheimpel/f139z9zx/3/

function playerCtrl($scope) {

  $scope.topics = [
   {
    "play": "play",
    "topic": "topic 1",
    "date": "date 1",
    "presenter": "presenter 1",
    "tags": "tag"
  },
    {
    "play": "play",
    "topic": "topic 2",
    "date": "date 2",
    "presenter": "presenter 2",
    "tags": "tag"
  },     

  ];

}

doldt · Accepted Answer · 2014-12-10 15:11:40Z

15

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.

I've updated your fiddle: here

So that the ng-repeat starts with:

    <tr ng-repeat="topic in topics">
        <td><a ng-href="#/{{topic.url}}"><i class="fa fa-play"></i></a></td>

(and I added that extra url field to your test data)

answered Dec 10, 2014 at 15:11

doldt

4,5063 gold badges24 silver badges36 bronze badges

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

1 Comment

hydradon Over a year ago

For me, this works ng-href="{{topic.url}}" (without the hash and slash in front

Rasalom · Accepted Answer · 2014-12-10 15:09:53Z

1

If I understood you correctly, you just need to use ng-href:

<td><a ng-href="{{linkVar}}"><i class="fa fa-play"></i></a></td>

and ng-click on row:

<tr ng-repeat="topic in topics" ng-click="changeLink($index)">

http://jsfiddle.net/n8s7ns7h/

answered Dec 10, 2014 at 15:09

Rasalom

3,1113 gold badges23 silver badges29 bronze badges

Comments

Malek Hijazi · Accepted Answer · 2014-12-10 15:10:08Z

0

Add a link attribute to your array of objects like so:

$scope.topics = [
   {
"play": "play",
"topic": "topic 1",
"date": "date 1",
"presenter": "presenter 1",
"tags": "tag",
"link" : "url"
},
{
"play": "play",
"topic": "topic 2",
"date": "date 2",
"presenter": "presenter 2",
"tags": "tag"
"link" : "url"
},     

];

ng-repeat="topic in topics"

and in the href

<a href="{{topic.link}}">

answered Dec 10, 2014 at 15:10

Malek Hijazi

4,1621 gold badge28 silver badges32 bronze badges

Collectives™ on Stack Overflow

Angular JS - dynamically add href links to icons using ng-repeat

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related