Angular JS - 使用 ng-repeat 动态地将 href 链接添加到图标答案

【问题标题】：Angular JS - dynamically add href links to icons using ng-repeatAngular JS - 使用 ng-repeat 动态地将 href 链接添加到图标
【发布时间】：2014-12-10 15:03:13
【问题描述】：

我正在尝试使用 Angular 创建一个按主题、日期、演示者组织并带有标签的不同视频的表格。

我使用 ng-repeat 重复我的对象数组以生成表格。

但是，如何动态更改播放按钮的 href 链接？

在下面的 jsfiddle 中，我添加了一个静态行，每个行应该是什么样子。第一列有一个链接到视频的 fontawesome 图标。如何编辑函数以便在 ng-repeat 中更新 href 链接？

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

  ];

}

【问题讨论】：

标签： angularjs angularjs-ng-repeat

【解决方案1】：

您可以在 ng-repeat 中放置一个带有动态 href 的标记，它的工作方式与您预期的一样 - 尽管使用 ng-href 更好，因此您的链接不会在数据绑定准备好之前中断。

我已经更新了你的小提琴：here

所以 ng-repeat 开始于：

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

（我在您的测试数据中添加了额外的 url 字段）

【讨论】：

对我来说，这适用于ng-href="{{topic.url}}"（前面没有哈希和斜线

【解决方案2】：

如果我理解正确，你只需要使用 ng-href：

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

然后 ng-click 行：

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

http://jsfiddle.net/n8s7ns7h/

【讨论】：

【解决方案3】：

向你的对象数组添加一个链接属性，如下所示：

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

在href中

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

【讨论】：