JAM JAM - 1 month ago 12
AngularJS Question

angular js Need help setting dynamic link in table

I am trying to set a link so it is dynamic, here is the function

$scope.prodFunc = function(){
var tempData = "{http://###001dcpas01.##########.com, EVT-MQ-VNM:9102}";
var config = {

headers : {

'Content-Type': 'application/json'

}
};


I need the ###-MQ-VNM:9102 to be dynamic based on the table row. Here is the table data and the event.dcpName is what needs to be dynamic when check is clicked.

<table class="table table-bordered rest-services-table table-centered">
<tr>
<th class="text-center">JVM Host</th>
<th>DCP Process</th>
<th>Health Check</th>
<th class="text-center">Check Status</th>
</tr>

<tr ng-repeat="event in events">
<td>{{event.jvmName}}</td>
<td>{{event.dcpName}}</td>
<td>{{event.status}}</td>
<td ><a href="" ng-click="prodFunc()">Check</a></td>
</tr>
</table>


<p>this is my first time posting so please be gentle :) Thank you,


Jim

Answer

You can pass the data you need to your prodFunc function like this:

<tr ng-repeat="event in events">
     <td>{{event.jvmName}}</td>
     <td>{{event.dcpName}}</td>
     <td>{{event.status}}</td>
     <td ><a href="" ng-click="prodFunc(event.dcpName)">Check</a></td>
 </tr>

Then you can use it like so:

$scope.prodFunc = function(dcpName){

    // something like this string concatenation ??
    var dynamicLink = "http://###001dcpas01." + dcpName + ".com:9102";

    // this temp data doesn't look right to me vvv ?

    var tempData = "{http://###001dcpas01.##########.com, EVT-MQ-VNM:9102}";
    var config = {

         headers : {

             'Content-Type': 'application/json'

         }
     }
}     

Alternatively you could do it like this with ngHref directive and skip the click funtion:

<tr ng-repeat="event in events">
         <td>{{event.jvmName}}</td>
         <td>{{event.dcpName}}</td>
         <td>{{event.status}}</td>
         <td ><a ng-href="http://someurl{{event.dcpName}}.com:port" >Check</a></td>
</tr>