Angular JS - 使用基于不同值的 ng-repeat 动态地将自定义 href 链接添加到表中的值。答案

【问题标题】：Angular JS - dynamically add custom href link to value in table using ng-repeat based on a different value.Angular JS - 使用基于不同值的 ng-repeat 动态地将自定义 href 链接添加到表中的值。
【发布时间】：2016-03-31 09:55:00
【问题描述】：

我正在使用 ng-repeat 创建一个显示一些门票信息的表格。目前在“票号”列中，我正在添加 href 链接（当用户单击“票号”时，它将打开新选项卡，并且 URL 将票号作为参数。

这是我创建的一个 plunker，因此它可以显示如上所述的功能http://plnkr.co/edit/GB8WWz?p=preview

我现在遇到的问题是 href 链接可能会有所不同，这取决于帐户列的值。因此，如果我的“account = foo”将 Ticket No 的 href 链接设置为“http://myfoopage.foo/ticketid...etc”。如果我的“account = boo”将 Ticket No 的 href 链接设置为“http://myboopage.boo/ticketid...etc”。

关于如何处理的任何想法？

scriptang.js

angular.module('plunker', ['ui.bootstrap']);

    function ListCtrl($scope, $dialog) {

      $scope.items = [
        {ticket: '123', description: 'foo desc',account:'foo'},
        {ticket: '111', description: 'boo desc',account:'boo'},
        {ticket: '222', description: 'eco desc',account:'eco'}
      ];


    }
    // the dialog is injected in the specified controller
    function EditCtrl($scope, item, dialog){

      $scope.item = item;

      $scope.save = function() {
        dialog.close($scope.item);
      };

      $scope.close = function(){
        dialog.close(undefined);
      };
    }

index.html

<!doctype html>
<html ng-app="plunker">
  <head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
    <script src="http://angular-ui.github.com/bootstrap/ui-bootstrap-tpls-0.1.0.js"></script>
    <script src="scriptang.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css" rel="stylesheet">
  </head>
  <body>
    <div ng-controller="ListCtrl">
      <table class="table table-bordered">
        <thead>
        <tr>
            <th>Ticket No</th>
            <th>Description</th>
            <th>Account</th>
            <th></th>
        </tr>
        </thead>
        <tbody>
        <tr ng-repeat="item in items">
          <td><a href="http://mywebpage.foo/ticketid={{item.ticket}}" target="_blank">{{item.ticket}}</a></td>
          <td>{{item.description}}</td>
          <td>{{item.account}}</td>
          <td><button class="btn btn-primary" ng-click="edit(item)">Edit</button></td>
        </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>

【问题讨论】：

标签： angularjs

【解决方案1】：

更新了 plnkr here，我将 ng-attr 指令与创建 url 的函数结合使用。

$scope.getUrl = function (item) {
  var url = '';
  if(item.account === 'foo')
    url = 'http://mywebpage.foo';
  else
    url = 'http://mwebpage.boo';

  url += '/ticketid='+item.ticket

  return url;
}

【讨论】：

超级棒，这正是我想要的。感谢一家工厂。