Angular JS - dynamically add custom href link to value in table using ng-repeat based on a different value.

Question

I am creating a table using ng-repeat that display some tickets info. Currently in the column "Ticket No" I am adding href link (when user click on the "Ticket No" it will open new tab and the URL will take the ticket no as parameter.

This a plunker I've created so it can show functionality as described above http://plnkr.co/edit/GB8WWz?p=preview

The problem I have now is that the href link might vary and it depends on the account column value. So if my "account = foo" set the href link of the Ticket No to "http://myfoopage.foo/ticketid...etc". If my "account = boo" set the href link for the Ticket No to "http://myboopage.boo/ticketid...etc".

Any idea on how to approach that ?

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>

Martijn Welker · Accepted Answer · 2016-03-31 10:03:03Z

1

Updated plnkr here, I've made use of the ng-attr directive in combination with a function that creates an 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;
}

answered Mar 31, 2016 at 10:03

Martijn Welker

5,6151 gold badge19 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

user2342259 Over a year ago

Super, that's exactly what I wanted. Thanks a mill for that.

Collectives™ on Stack Overflow

Angular JS - dynamically add custom href link to value in table using ng-repeat based on a different value.

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related