Angular JS - 異なる値に基づいてng-repeatを使用してテーブルの値にカスタムhrefリンクを動的に追加します。

いくつかのチケット情報を表示するng-repeatを使用してテーブルを作成しています。現在、チケットの列にはhrefリンクが追加されています（チケット番号をクリックすると新しいタブが開き、URLはパラメータとしてチケット番号を取得します）Angular JS - 異なる値に基づいてng-repeatを使用してテーブルの値にカスタムhrefリンクを動的に追加します。

これは私が作成したプランカーです上記のように機能を表示することができますhttp://plnkr.co/edit/GB8WWz?p=preview

私は今、hrefリンクが異なる可能性があり、アカウントの列の値に依存しているということがありますので、私の "account = foo" 「http://myfoopage.foo/ticketid...etc」。私の「アカウントが= BOO」いいえチケットのHREFリンクを設定した場合に「http://myboopage.boo/ticketid...etc」へ。

ことをアプローチする方法上の任意のアイデア？

scriptang.js here plnkr更新

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>

出典

2016-03-31 user2342259

、私はURLを作成する機能と組み合わせて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; 
}

出典

2016-03-31 10:03:03

スーパー、それはまさに私が望んでいたものです。そのための工場に感謝します。 – user2342259

Angular JS - 異なる値に基づいてng-repeatを使用してテーブルの値にカスタムhrefリンクを動的に追加します。

答えて

関連する問題