Angular JS - dynamisch hinzufügen href-Links zu Symbolen mit ng-repeat

Question

Ich versuche eckig zu verwenden, um eine Tabelle mit verschiedenen Videos zu erstellen, die nach Thema, Datum, Moderator organisiert und auch markiert sind.

Ich habe ng-repeat verwendet, um über mein Array von Objekten zu wiederholen, um eine Tabelle zu erzeugen.

Wie kann ich jedoch die href-Verknüpfung für die Play-Schaltfläche dynamisch ändern?

In der unten stehenden Datei habe ich eine statische Zeile hinzugefügt, wie jeder aussehen sollte. Die erste Spalte enthält ein Fontawesome-Symbol, das mit einem Video verknüpft ist. Wie kann ich die Funktion so bearbeiten, dass der href-Link in der ng-Wiederholung aktualisiert wird?

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" 
    },  

    ]; 

} 

Answer 1

Sie können es innerhalb der ng-Repeat, einen <einen> Tag mit dynamischen href setzen funktioniert genau so, wie Sie es erwarten würden - obwohl die Verwendung von ng-href besser ist, damit Ihre Links nicht unterbrochen werden, bevor die Datenbindungen bereit sind.

Ich habe deine Geige aktualisiert: here

Damit die ng-Wiederholung beginnt mit:

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

(und ich fügte hinzu, dass zusätzliche URL-Feld auf Ihre Testdaten)

Answer 2

Wenn ich Sie richtig verstanden, Sie müssen nur ng-href verwenden:

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

und ng Sie auf Zeile:

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

http://jsfiddle.net/n8s7ns7h/

Answer 3

ein Link-Attribut auf Ihre Array von Objekten hinzufügen wie folgt:

$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" 

und in den href

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