Question

我正在使用ng-repeat创建一个表格，显示一些票证信息。目前在专栏＃34; Ticket No＆＃34;我正在添加href链接（当用户点击＆＃34; Ticket No＆＃34;它将打开新标签，URL将把票号no作为参数。

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

我现在遇到的问题是href链接可能会有所不同，这取决于帐户列值。所以，如果我的＆＃34;帐户= foo＆＃34;将故障单号的href链接设置为＆＃34; http://myfoopage.foo/ticketid...etc＆＃34;。如果我的＆＃34;帐户= boo＆＃34;将故障单号的href链接设置为＆＃34; http://myboopage.boo/ticketid...etc＆＃34;。

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

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>

Answer 1

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

$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;
}

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

1 个答案: