Question

我正在尝试使用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"
  },     

  ];

}

Answer 1

你可以放一个＆lt; a＆gt;在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字段）

Answer 2

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

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

并点击行：

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

http://jsfiddle.net/n8s7ns7h/

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

Angular JS - 使用ng-repeat动态添加图标的href链接

3 个答案: